javascript - 自动滑动

Question

到目前为止，这段代码只会通过单击图像上的缩略图来滑动图像。当我们点击缩略图时，幻灯片就会滑动图像。但现在我还希望它每 10 秒自动滑动一次图像。

这是我的 fiddle :

HTML

    <ul id="slide-wrapper">
        <li><img src="http://placekitten.com/120/120"/>         
        <p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>


        <li><img src="http://placekitten.com/120/120"/>         
        <p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
    </ul>

    <ul class="thumnails">
        <li class="img-thum">
            <img src="http://placekitten.com/120/120"/>
            <p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>


        <li class="img-thum">
            <img src="http://placekitten.com/120/120"/>
            <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

    </ul>

</div>

<小时/>

JS

//When we click on thumb img
$('.thumnails li').click(function() {

var
   //SlideShow
   sshow = $(this).closest('#slideshow'),
   //Big
   big = sshow.find('#slide-wrapper'),
   //thumb
   thumb = sshow.find('.thumnails'),
   //Get index
   indx = thumb.find('li').index(this),
   //Current index
   currentIndx = big.find('li').index(big.find('li:visible'));

   //If currentIndx is same as clicked indx don't do anything
   if(currentIndx == indx) {
      return;
   }

 big
    //Fadeout current image
    .find('li:visible').fadeOut(0).end()
    //Fadein new image
    .find('li:eq(' + indx + ')').fadeIn(0);
 });

提前致谢。

Answer 1

只需使用 setInterval 函数在 document.ready 中每 10 秒触发一次“幻灯片按钮”点击即可:

$(document).ready(function() {
    setInterval(function(){ 
        //Your code inside here will be executed every 10 seconds
        $('.thumnails li').trigger("click");
    }, 10000);
}