幻燈片從幻燈片2跳躍到5 js

Question

我正在使用這張幻燈片顯示我在網上找到的幻燈片工作正常，它有一些指示器按鈕（那些顯示在你的圖片中的按鈕）也有一些箭頭可以讓你移動到下一張照片或返回。這張幻燈片使用了boostrap。由於現在紐曼播放/暫停包括，但由於某些原因，它從幻燈片2跳到滑動5，如何解決此問題：/

HTML代碼：

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

對於暫停只是停止該定時器。