美文网首页
渐变轮播

渐变轮播

作者: zy懒人漫游 | 来源:发表于2018-01-26 19:57 被阅读0次

    有bug的
    bug体现在,刷新页面的时候,第一次按左按钮,第2张图片会出现3次,我一直以为是js的哪里写错了,但是通过对比,纠错,始终找不到bug产生的原因,突然想到,如果js没有写错,那就是css写的不对,于是更改了css
    无bug

    缓存节点信息,保存图片宽度和图片数量

    var $ct = $('#carousel'),
      $imgs = $('#ct>img'),
      $pre = $('#pre'),
      $next = $('#next'),
      $bullet = $('#bullet'),
      imgWidth = $imgs.width(),
      imgCount = $imgs.length
    

    设置页面初始显示的图片是第一张,设置播放锁,从第下标为0的第一张图片开始播放

    var pageIndex = 0
    var isAnimate = false
    play(0)
    

    播放的方法

    function play (idx) {
      if (isAnimate) return
      isAnimate = true
      $imgs.eq(pageIndex).fadeOut(500)
      $imgs.eq(idx).fadeIn(500, function () {
        isAnimate = false
      })
      pageIndex = idx
      setBullet()
    }
    

    左右按钮的播放方法

    function playNext () {
      play((pageIndex + 1) % imgCount)
    }
    
    function playPre () {
      play((imgCount + pageIndex - 1) % imgCount)
    }
    

    调用左右按钮的方法,以及设置小圆点点击时,找到对应的下标,然后显示对应下标的图片

    $next.click(function () {
      playNext()
    })
    $pre.click(function () {
      playPre()
    })
    $bullet.find('span').on('click', function () {
      var idx = $(this).index()
      play(idx)
    })
    

    当小圆点移动时,添加class,之前的index移除class。设置自动播放以及当鼠标放在ct的页面里时,清除定时器,调用自动播放。当进入页面时,页面就会自动播放

    function setBullet () {
      $bullet.children().removeClass('active')
        .eq(pageIndex).addClass('active')
    }
    
    function autoPlay () {
      clock = setInterval(function () {
        playNext()
      }, 3000)
    }
    
    $ct.mouseenter(function () {
      clearInterval(clock)
    }).mouseleave(function () {
      autoPlay()
    })
    
    autoPlay()
    

    总结:

    通过轮播的2种方式,学到了在css中,不同的轮播实现方法,对应相同的页面显示逻辑,体现出对相对定位和绝对定位的运用,z-index使用

    js部分就是,学会运用false 和 true 设定动画锁,css用js来添加,移除样式

    相关文章

      网友评论

          本文标题:渐变轮播

          本文链接:https://www.haomeiwen.com/subject/gktbaxtx.html