简单的jQuery自动幻灯片

我有一个简单的幻灯片，到目前为止工作正常。它由寻呼机和要显示的图像组成。两者都是无序列表：

 Show Keyvisual 1
 Show Keyvisual 2
 Show Keyvisual 3

相应的jQuery代码是：

 $('#keyvisualpager li a').click(function () { // get position of a element var mbr_index = $(this).parent().prevAll().length; var mbr_targetkeyvisual = mbr_index + 1; // hide current image and show the target image $('#keyvisualslides li:visible').hide(); $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show() // remove active class from current indicator and add the same class to target indicator $('#keyvisualpager li a').removeClass('keyvisualactive'); $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); });

最初所有图像都设置为display：none; … upcon单击#keyvisualpager中的链接，然后显示相应的图像。同时指标也相应变化。

现在，我的问题：

除了这种浏览图像的模式，我需要整个幻灯片自动前进。我怎样才能实现这一目标：

a）下面的图像显示在5秒之后

b）将类“.keyvisualactive”添加到#keyvisualpager中的相应元素中

注意：遗憾的是我必须使用jquery 1.2.1，更新不是一个选项。

谢谢你的帮助

编辑

我现在正在使用此代码。它几乎可以工作。但是在显示集合中的最后一个图像后：我怎么能告诉它重新开始第一个图像？谢谢！

 var reload = setInterval(function(){ // get position of a element var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length; var mbr_targetkeyvisual = mbr_index + 2; // alert(mbr_index+'//'+mbr_targetkeyvisual) // hide current image and show the target image $('#keyvisualslides li:visible').hide(); $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); // remove active class from current indicator and add the same class to target indicator $('#keyvisualpager li a').removeClass('keyvisualactive'); $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); }, 2000);

您可以使用JavaScript的setInterval（）方法来实现此目的。

 var reload = setInterval(function(){ // do something }, 5000);

该数字是每个暂停的长度，以毫秒为单位。

要停止幻灯片放映，例如当用户选择图像时，可以使用clearInterval（）方法。

编辑

尝试这样的事情：

 $('#keyvisualpager li a').click(function () { var reload = setInterval(function(){ // get position of a element var mbr_index = $(this).parent().prevAll().length; var mbr_targetkeyvisual = mbr_index + 1; // hide current image and show the target image $('#keyvisualslides li:visible').hide(); $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show() // remove active class from current indicator and add the same class to target indicator $('#keyvisualpager li a').removeClass('keyvisualactive'); $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); }, 5000); $('#pagerstop').click(function(){ clearInterval(reload); } });

编辑2

你必须跟踪图像数量和你所在的索引（如果我理解你在你的var mbr_targetkeyvisual中有这个吗？）所以它应该像这样工作（未经测试）：

 // Image count var content_length = $('#keyvisualslides').children().length; var automate = setInterval(function(){ if(index < content_length){ $('#keyvisualslides li:visible').hide(); $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); mbr_targetkeyvisual++; } else{ mbr_targetkeyvisual = 0; $('#keyvisualslides li:visible').hide(); $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); mbr_targetkeyvisual++; } }, 5000);

如何使其自动化，或者我们可以添加导航next和prev

 $(function(){ $('.slide-thumb .thumb').on("mouseenter",function(){ var dataImage = $(this).data('image'); $('.slide-jumbo .jumbo:visible').fadeOut(1000,function(){ $('.slide-jumbo .jumbo[data-image="'+dataImage+'"]').fadeIn(500); }); }); });

  * { font-family: Arial; } .slide-container { /*border: solid 1px;*/ width: 500px; height: 360px; } .slide-jumbo { /*border: solid 1px;*/ width: 500px; height: 300px; overflow: hidden; } .jumbo { position: relative; display: inline-block; width: 500px; height: 300px; float: left; } .jumbo img, .thumb img { position: absolute; left: 0; } .jumbo img { top: 0; } .thumb img { bottom: 0; } .jumbo-capt, .thumb-capt { width: 100%; background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; /* -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; */ left: 0; bottom: 0; } .slide-thumb { /*border: solid 1px;*/ width: 500px; height: 60px; overflow: hidden; } .thumb { position: relative; /*border: solid 1px;*/ display: inline-block; width: 100px; height: 60px; overflow: hidden; float: left; }

       Title 1
 Summary 1
 
 
    Title 2
 Summary 2
 
 
    Title 3
 Summary 3
 
 
    Title 4
 Summary 4
 
 
    Title 5
 Summary 5
 
 
 
       Title 1  
 
 
      Title 2  
 
 
      Title 3  
 
 
      Title 4  
 
 
      Title 5