渐变轮播

有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来添加，移除样式

总结:

推荐阅读更多精彩内容