jQuery照片滑塊中setInterval（）的替代方法

Question

我從頭開始在JQuery中創建一個photoslider，我使用setInterval（）以使圖像每3秒運行一次。但是，我正在使用播放/停止按鈕，因爲它必須等待間隔才能完成以檢測按鈕，所以它不響應我的需要。我可以使用另一個選項，以便播放/停止按鈕立即響應？謝謝！

var test = parseInt($interval.val(),10)+1000; 
var test2 = test; 
function runInterval() { 
    $(".slider #" + count_image).show("slide", { 
     direction: "right" 
    }, 500); 
    test2 = test; 
    if ($("#parrafo").text() == "Play") { 
     $(".slider #" + count_image).delay($interval.val()).hide("slide", { 
      direction: "left" 
     }, 500); 
     if (count_image == max_images) count_image = 1; 
     else count_image = count_image + 1; 
    } 
    $interval = $("select#mySelect option:selected"); 
    test = parseInt($interval.val(), 10) + 1000; 
    clearInterval(s); 
    s = setInterval(runInterval, test2); 
} 
s = setInterval(runInterval, test2); 

Answer 1

Here's a demo。我認爲它工作就像你想要的。我正在使用div s而不是img s，這應該沒什麼區別。

HTML：

<div class="slider"> 
    <div id="0" class="img">0</div> 
    <div id="1" class="img hidden">1</div> 
    <div id="2" class="img hidden">2</div> 
    <div id="3" class="img hidden">3</div> 
    <div id="4" class="img hidden">4</div> 
</div> 
<select id="mySelect"> 
    <option>200</option> 
    <option>1000</option> 
    <option>2000</option> 
    <option>3000</option> 
</select> 
<button id="parrafo">Start/Stop</button> 
<span id="status"></span> 

CSS：

.hidden { 
    display: none; 
} 
.slider, .img { 
    width: 32px; 
    height: 32px; 
} 
.img { 
    background: blue; 
    color: white; 
    text-align: center; 
    font-size: 24px; 
} 

JS：

var slideshowActive = false; 
var slideshowTimeoutDuration = 5000; 
var slideshowTimeout = -1; 
var currentImg = 0; 
var numImgs = 5; 
var slideDuration = 500; 

function showImg(img) { 
    $(".slider #" + img).show("slide", { 
     direction: "right" 
    }, slideDuration); 
} 

function hideImg(img) { 
    $(".slider #" + img).hide("slide", { 
     direction: "left" 
    }, slideDuration); 
} 

function swapImgs(currentImg) { 
    hideImg(currentImg); 

    var nextImg = currentImg + 1; 
    if (nextImg >= numImgs) { 
     nextImg = 0; 
    } 

    // Show the next image after the currentImg has been hidden (after slideDuration). 
    setTimeout(function() { 
     showImg(nextImg); 
    }, slideDuration); 

    return nextImg; 
} 

function onSlideshowTimeout() { 
    console.log("onSlideshowTimeout", new Date()); 

    if (!slideshowActive) { 
     $("#status").html("Slideshow aborted"); 
     return; 
    } 

    currentImg = swapImgs(currentImg); 

    if (slideshowActive) { 
     // Continue the slideshow if active, by setting a new timeout. 
     slideshowTimeout = setTimeout(onSlideshowTimeout, slideshowTimeoutDuration); 
    } 
} 

$("#parrafo").click(function() { 
    // Toggle the slideshow active. 
    slideshowActive = !slideshowActive; 

    // If the slideshow is now active, start it. 
    if (slideshowActive) { 
     // Only calculate the duration when the Start button is clicked. 
     var $interval = $("select#mySelect option:selected"); 
     slideshowTimeoutDuration = parseInt($interval.val(), 10) + 1000; 
     // Start the slideshow. 
     $("#status").html("Slideshow started with duration=" + slideshowTimeoutDuration + "ms"); 
     slideshowTimeout = setTimeout(onSlideshowTimeout, slideshowTimeoutDuration); 
    } else { 
     $("#status").html("Slideshow stopped"); 
    } 
}); 

截圖：