Question

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

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

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

enter image description here

Answer 1

最简单的方法：

创建变量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)

然后只需添加autoPlay切换处理程序

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

FIDDLE：http://jsfiddle.net/UWbrQ/197/

Answer 2

由于我没有看到自动播放按钮，我想到了自动解决方案在此fiddle中，当用户点击前下一个按钮时，图库会自动移动（图像为十秒）自动移动停止，在不活动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>

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

 }

Answer 4

虽然这个社区的目的不是向其他人提供完整的脚本，而是为特定问题提供解决方案，但鉴于我对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>

动画图像轮播

4 个答案: