Question

我正在使用这个幻灯片放映，我在网上找到，幻灯片显示工作正常它有一些指示器按钮（那些按钮显示你是什么图片）也有一些箭头，允许你移动到下一张照片或回去。这个幻灯片是使用boostrap。感谢纽曼现在播放/暂停，但由于某种原因，它从幻灯片2跳到幻灯片5，如何解决这个问题：/

HTML code：

<div id="slideshow">    
  <div id="s1" class="slide row active"> 
     <img src="images/slide1.png"  alt="" class="img-responsive" style="width:100%; height:auto;"/> 
   </div>

   <div id="s2" class="slide row"> 
     <img src="images/slide2.png" alt="" class="img-responsive" style="width:100%; height:auto;"/> 
   </div>  

   <div id="s3" class="slide row"> 
     <img src="images/slide3.png" alt="" class="img-responsive" style="width:100%; height:auto;"/>  
   </div>

   <div id="s4" class="slide row"> 
     <img src="images/slide4.png" alt="" class="img-responsive" style="width:100%; height:auto;"/>  
   </div>   

   <div id="s5" class="slide row"> 
     <img src="images/slide5.png" alt="" class="img-responsive" style="width:100%; height:auto;"/>        
   </div>

   <div id="s6" class="slide row"> 
     <img src="images/slide6.png" alt="" class="img-responsive" style="width:100%; height:auto;"/> 
   </div> 
  <div id="controls" class="row">
    <div id="left" class="col-xs-6">
      <a href="javascript: previous();"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
      </a>  
    </div>
    <div id="right" class="col-xs-6"> 
      <a href="javascript: next();"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
    </div>
  </div>
  <div id="indicators" class="hidden-xs hidden-sm">
    <a id="i1" href="#s1" class="active"><span class="hiddenText">Slide 1</span></a> 
     <a id="i2" href="#s2"><span class="hiddenText">Slide 2</span></a> 
     <a id="i3" href="#s3"><span class="hiddenText">Slide 3</span></a> 
     <a id="i4" href="#s4"><span class="hiddenText">Slide 4</span></a> 
     <a id="i5" href="#s5"><span class="hiddenText">Slide 5</span></a>  
     <a id="i6" href="#s6"><span class="hiddenText">Slide 6</span></a>
   </div> 
</div>

的js

$(document).ready(function(){
    initSlideshow();
play()
});

var slideCount, currentSlide;
play()  
function initSlideshow(){
    slideCount = 0;
    //count the slides in slideshow
    $('#slideshow .slide').each(function(){
        slideCount++;
    });
    currentSlide = 1;
    jump(); 
}


    function play() {
  next();
  setInterval(function() { play()}, 1000 );
}
function next(){
    //remove active class from current slide & indicator
    $('#slideshow #s' + currentSlide).removeClass('active');
    $('#slideshow #i' + currentSlide).removeClass('active');

    //increment index
    if(currentSlide == slideCount){
        currentSlide = 1;
    }
    else{
        currentSlide++; 
    }

    //add active class to new current slide & indicator
    $('#slideshow #s' + currentSlide).addClass('active');
    $('#slideshow #i' + currentSlide).addClass('active');


}

function previous(){
    //remove active class from current slide & indicator
    $('#slideshow #s' + currentSlide).removeClass('active');    
    $('#slideshow #i' + currentSlide).removeClass('active');        

    //decrement index
    if(currentSlide == 1){
        currentSlide = slideCount;
    }
    else{
        currentSlide--; 
    }

    //add active class to new slide & indicator
    $('#slideshow #s' + currentSlide).addClass('active');   
    $('#slideshow #i' + currentSlide).addClass('active');


}

function jump(){
$('#indicators a').click(function(e){
e.preventDefault();
//remove active class from current slide & indicator
$('#slideshow #s' + currentSlide).removeClass('active');    
$('#slideshow #i' + currentSlide).removeClass('active');

//change current slide index
currentSlide = $(this).attr('href').slice(2);

//add active class to new slide & indicator
$('#slideshow #s' + currentSlide).addClass('active');   
$('#slideshow #i' + currentSlide).addClass('active');

});
}

Answer 1

对于播放按钮，只需创建将调用next（）函数并为自己设置Timer的函数。

类似

function play() {
  next();
  setTimeout(5000, function(){play();});
}

暂停时，请停止此计时器。

幻灯片从幻灯片2跳到5 js

1 个答案: