向这个 jQuery Carousel 添加自动播放答案

【问题标题】：Add autoplay to this jQuery Carousel向这个 jQuery Carousel 添加自动播放
【发布时间】：2012-04-13 14:25:18
【问题描述】：

我使用 jQuery 创建了一个轮播，我想为其添加自动播放功能。

这是我现有的 JS：

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });
});

这里是a working fiddle。

问题：我不知道从哪里开始自动播放。有什么建议吗？

【问题讨论】：

标签： javascript jquery carousel autoplay

【解决方案1】：

看看这个：

http://jsfiddle.net/gy7LE/13/

$(document).ready(function (){

    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });
        setInterval ( function(){Next();}, 1000 );
    });

    function Next(){
        var _next = false;
        $('#button a').each(function(){
            if(_next){
                $(this).addClass('active');
                _next = false;
            }
            else if($(this).hasClass('active')){
                _next = true;
                $(this).removeClass('active')
            }

        });  
        if(_next)
            $("#button a:eq(0)").addClass("active");

       var activeIndex = parseInt($(".active").attr("rel"));
       $('#myslide .cover').animate({left:-705*(parseInt(activeIndex))});      
    }

【讨论】：

我没有看到自动播放工作？它从 2 开始，然后，什么都没有？
感谢您的帮助！！但有一件事，当你真正点击按钮时，自动播放就一团糟。 James Hill 的代码没有这样做。
如果你想停止自动播放，只需清除间隔。喜欢这里link
谢谢。还有一件事，第一次运行时，它从第二个 div 开始，而不是第一个。
我更新它。只需删除 de Next();在 $(document).ready() 中

【解决方案2】：

这会奏效。见代码中的 cmets：

var slideInterval = null;

$(document).ready(function() {
    $('#button a').click(function() {
        //Clear slide interval to allow overriding of auto slide
        if (slideInterval !== null) clearInterval(slideInterval);

        var integer = $(this).attr('rel');
        DoSlide(integer);
    });

    //Begin auto slide
    slideInterval = setInterval(DoSlide , 2000);
});

function DoSlide(integer) {
    integer = integer || parseInt($('.active').attr('rel')) + 1;

    // Reset auto slide
    if (integer == 5) integer = 1;

    $('#myslide .cover').animate({
        left: -705 * (parseInt(integer) - 1)
    });

    $('.active').removeClass('active');    
    $('a[rel="' + integer + '"]').addClass('active');
}

这里是a working fiddle to demonstrate。

【讨论】：

我觉得第二次播放有问题。所以它从 1,2,3,4 然后 1，然后，不再工作了..？
@Lelly，刚刚在您的原始问题中发表了评论。我忘记将代码/小提琴更新到最新版本。错误消失了 - 立即尝试。
这是一个糟糕的解决方案。它有连续的索引。
@Yorgo，你能详细说明一下吗？另外，你能提供一个没有我那么差的解决方案吗？
@JamesHill 您在这里使用索引来循环自动播放：if (integer == 5) integer = 1; 我给出了答案。你可以检查一下

【解决方案3】：

更优雅的解决方案

$(document).ready(function() {
  setTimeout(function () {
    $('.carousel-control.right').trigger('click');
    $('.carousel-inner').trigger('mouseenter');
    $('.carousel-inner').trigger('mouseleave');
  }, 3000); //set this time to what ever time you want it to take to start scrolling this is separate for the interval you set for the carousel though you can set it to be the same BooStrap default is 4000
});

【讨论】：

【解决方案4】：

你可以试试this plugin，它会为你寻找图片并创建自动轮播。

【讨论】：