javascript - 动画图像轮播

Question

我正在使用并修改了图像 slider /轮播，需要一些指导，其中有两件事。我需要首先让它自动滚动图像。其次，我需要在下面有三个单词来充当控件。因此，如果我单击其中一个，它会将我带到 slider 中的该图像，并且下面有一些文本？

Example Fiddle

(function() {
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
        carousel = $('.carousel');
    carousel.prepend(last.clone()).append(first.clone());
    carousel.width(itemWidth * $('.item').length);
    carousel.css({left: -itemWidth});
    $('.prev').on('click', function(e){
        e.preventDefault();
        carousel.animate({left: '+=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left) < 2) {
                carousel.css({left: -itemWidth * (carousel.children().length - 2)});
            }
        });
        return false;       
    });
    $('.next').on('click', function(e){
        e.preventDefault();
        carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        return false;       
    });
})();

所以这张图片说明了我的目标。

Answer 1

最简单的方法:

创建变量var autoplay=true;,

将您的函数绑定(bind)到 setInterval 中的下一个按钮单击，因此 setInterval 函数将如下所示:

setInterval(function(){
    if(!autoplay)return;
    carousel.animate({left: '-=' + itemWidth}, 300, function(){
      if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
        carousel.css({left: -itemWidth});
      }
    })
},1000)

然后只需添加自动播放切换处理程序

$('.autoplayControl').on('click',function(){
    autoplay=!autoplay;
})

fiddle :http://jsfiddle.net/UWbrQ/197/