自动滑动

Question

到目前为止，此代码仅通过单击其上的thumnail来滑动图像。当我们单击thumnail图像时，幻灯片将滑动图像。但现在我还希望它每隔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

只需在document.ready中使用setInterval函数每隔10秒触发一次“滑动按钮”：

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

Answer 2

你能做的是：

setTimeout(function (){
 autoSlide();
},10000);

接下来，将幻灯片代码放在像autoSlide这样的函数中，而不是每隔10秒自动运行代码。

将此功能也放在您的点击事件中。