jquery版的轮播图

用jquery实现一个轮播图，效果：自动轮播，点击切换，鼠标移入暂停
用jquery实现无缝轮播

轮播图

var n = 0;
$('button').click(function() {
  $('button').removeClass(); // removeClass不传入参数，则默认移除该元素所有class
  $(this).addClass('red');
  n = $(this).index(); //通过.index()方法可以获取伪数组的index
  $('.imgs').css('transform', 'translateX(' + (-100 * n) + 'px)');
});

function setTimer() {
  n++;
  $('button').eq(n % 5).trigger('click');
}

var timer = null;
timer = setInterval(setTimer, 3000);

$('.box').hover(function() {
  clearInterval(timer);
}, function() {
  setTimer(); //鼠标移出后立即先执行一遍
  timer = setInterval(setTimer, 3000);//然后再每隔3s执行
});

无缝轮播图

通过这个demo，了解了transitionend这个方法

为了防止切换页面，重新回来时，定时器出现错乱，建议加入以下代码：

var timer = null;

$(document).on("visibilitychange", function() {
    if (document.hidden === true) {
        clearInterval(timer);
    } else {
        timer = setInterval(slide, 2000);
    }
});