将自动播放添加到此jQuery Carousel

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

这是我现有的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')} }); }); });​ 

这是一个工作小提琴 。

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

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

Answer 2

这会奏效。 查看代码中的注释：

 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'); }​ 

这是一个工作小提琴演示 。

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

Answer 4

你可以尝试这个插件 ，它为你寻找图像，并创建自动旋转木马。