动画图像轮播答案

【问题标题】：Animating an image carousel动画图像轮播
【发布时间】：2014-07-23 17:16:38
【问题描述】：

我正在使用并修改了图像滑块/轮播，需要一些指导，一两件事。我需要先让它自动滚动图像。其次，我还需要在下面有三个单词作为控件。所以如果我点击一个，它会带我到滑块中的那个图片，下面有一些文字？

(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;       
    });
})();

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

【问题讨论】：

stackoverflow.com/questions/12608356/…查看此链接
能否请您更清楚地说明您的第二个需求
所以第二件事是 - 在滑块下方有三个链接，每个链接都连接到一个幻灯片。因此，当您单击名为“link1”的链接时，会滑到“image1”。在这下面会有与每张幻灯片相关联的文本，当您单击链接以更改幻灯片时，这些文本也会发生变化？
像这样jsfiddle.net/iamdanbarrett/UWbrQ/199
我添加了一张图片来帮助可视化我想要实现的目标。

标签： javascript jquery carousel

【解决方案1】：

虽然这个社区的目的不是为其他人提供完整的脚本，而是为特定问题提供解决方案，
鉴于我对this fiddle 中的网络画廊的热爱，在图片下方有一个画廊，上面有标题，带有按钮移动图像
为此，我不得不更改脚本逻辑并且代码略有增加
如果您喜欢此解决方案，请不要忘记用绿色标记我的答案；）谢谢

<script type="text/javascript">
$(document).ready(function(){
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
        countx=1,
        carousel = $('.carousel');
        console.log(carousel.position().left)
    carousel.width(itemWidth * $('.item').length);

    //auto start
    var giranews = setInterval(function(){move()},5000);
    function move(){
        var left=carousel.position().left
        if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{ carousel.animate({left: '-=' + itemWidth}, 300);}
        if(countx===4){countx=1}else{countx++}
        showCaption(countx)
        };

    function stopx(){
             clearInterval(giranews);
        };  

    function countdown(a) {
        var count = a;
         timerId = setInterval(function() {
            count--;
            console.log(count);
            if(count == 0) {
                clearInterval(timerId);
                giranews = setInterval(function(){move()},5000);
            };
        }, 1000);
    };

    //show captions in caption div
    function showCaption(countx){
        var caption=$('li:eq('+(countx-1)+')').attr('data-caption')
        $('#caption').text(caption)
        }
    showCaption(countx)

    $('.prev').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        if(countx===1){countx=4}else{countx--}
        showCaption(countx)
        var left=carousel.position().left
        if(left===0){carousel.animate({'left':(itemWidth*($('li.item').length-1)*-1)+'px'},300)}else{carousel.animate({left: '+=' + itemWidth}, 300);}
     });

    $('.next').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        if(countx===4){countx=1}else{countx++}
        showCaption(countx)
        var left=carousel.position().left
        if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{carousel.animate({left: '-=' + itemWidth}, 300);} 

    });

    //insert buttons links to image
    for(a=0;a<$('li.item').length;a++){
        $('<a class="butt">'+(a+1)+'</a>').appendTo('div.buttons')
        }

    $('a.butt').click(function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        var pos=carousel.position().left
        carousel.animate({'left': (($(this).index()*itemWidth)*-1)+'px'})
        showCaption($(this).index()+1)
        countx=$(this).index()+1
        })

})
</script>

【讨论】：

【解决方案2】：

由于我没有看到自动播放按钮，所以我想到了自动解决方案。
在此fiddle 中，当用户单击前下一个按钮时，图库会自动移动（图像为 10 秒）自动移动在 10 秒不活动后停止重新启动
对我来说，这是一个更优雅的解决方案

<script type="text/javascript">
$(document).ready(function(){
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),

        carousel = $('.carousel');
        console.log(itemWidth)
    carousel.prepend(last.clone()).append(first.clone());
    carousel.width(itemWidth * $('.item').length);
    carousel.css({left: -itemWidth});

    //auto start
    var giranews = setInterval(function(){move()},5000);
    function move(){
            carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        };

    function stopx(){
             clearInterval(giranews);
        };  

    function countdown(a) {
        var count = a;
         timerId = setInterval(function() {
            count--;
            console.log(count);
            if(count == 0) {
                clearInterval(timerId);
                giranews = setInterval(function(){move()},5000);
            };
        }, 1000);
    };

    $('.prev').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        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();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        return false;       
    });
})
</script>

【讨论】：

这是一种非常优雅的方式。有没有办法在滑块下方为每张幻灯片添加控件，如果您单击其中一个，它将带您到该特定幻灯片，并且在链接控件下方还有一个标题？
我在我的问题中放置了一张图片，展示了我想要实现的目标。
@user3520443：我发布了一个新答案，希望你会喜欢。

【解决方案3】：

The Easiest Way Demo Based On your Code with Just Addition of few Lines

定期调用自动功能这个功能基本上就是你点击下一张幻灯片里面的内容
将其包装在函数中并以所需的间隔调用它

 setInterval(Auto,5000);
 function Auto(){

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

 }

【讨论】：

【解决方案4】：

最简单的方法：

创建变量var autoplay=true;，

包装你的函数绑定到 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;
})

小提琴：http://jsfiddle.net/UWbrQ/197/

【讨论】：