自动滑动

Slide it automatically

本文关键字：更新时间：2023-09-26

到目前为止，这段代码只能通过点击图片上的缩略图来滑动图片。当我们点击缩略图时，幻灯片将滑动图像。但是现在我还想让它每隔10秒自动滑动图像。

这是我的小提琴:

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

提前感谢。

只需在文档中触发每10秒点击一次"滑动按钮"。

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

你可以做的是:

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

接下来，将幻灯片代码放入autoSlide这样的函数中，然后它将每10秒自动运行一次代码。

将该函数也放在单击事件中。

没有找到相关文章