在圖像幻燈片中添加延遲Jquery

Question

我有一個使用Jquery的圖像幻燈片。我希望它每5秒鐘或自定義時間自動更改。在我的幻燈片中有用於生成下一個幻燈片的下一個按鈕。

但這是我的問題。

1. 如果我運行第一次或第一次點擊，它不會改變下一張圖片。但在第二，第三，點擊它可以連續改變。

   2.如何添加自動更改圖片，在自定義超時。因爲我嘗試添加setTimeout（），並且我使用Next按鈕使幻燈片更改速度非常快（閃爍）。

HTML文件：

<div class="slider"> 
    Next &raquo; 
</div> 

<div class="subbox1"> 
<div class="images"> 
    <img src="https://imageshack.us/a/img203/2859/thumb73.jpg" /> 
    <img src="https://imageshack.us/a/img20/4360/thumb72.jpg" /> 
    <img src="https://imageshack.us/a/img855/3400/thumb61h.jpg" /> 
</div> 
</div> 

<div class="subbox1"> 
<div class="images"> 
    <img src="https://imageshack.us/a/img853/3924/thumb71.jpg" /> 
    <img src="https://imageshack.us/a/img845/5805/thumb62m.jpg" /> 
    <img src="https://imageshack.us/scaled/large/163/thumb2nv.jpg" /> 
</div> 
</div> 

CSS文件

.slider { 
    padding : 10px; 
    background : #000; 
    color : #FFF; 
    width : 100px; 
    margin-left : 10px; 
} 
.subbox1{ 
    float : left; 
    width : 227px; 
    height: 189px; 
    position : relative; 
    margin : 10px; 
} 

.images img { 
    position : absolute; 
    top : 0; 
} 


JS File 
function anim(selector) { 
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(500); 
    $(".images img", selector).first().fadeIn(500); 

    //Make slideshow blink 
    setTimeout(function(){anim(selector)}, 5000); 
} 

$(".slider").click(function() { 
    $(".subbox1").each(function() {anim(this)}); 
}); 

這裏是我的小提琴RESULT

Answer 1

您必須使用setInterval()方法。然後創建一個變量i作爲計數器，並且每500ms增加一個值。

var i = 0, max = 5; 
var interval = setInterval(function(){ 
    showSlide(i); 
    i = 1 >= max ? 0 : ++i; 
}, 500); 

next_button.onclick = function(){ 
    i += 1; 
    showSlide(i); 
} 

好幸運