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. 내가 생각하면 당신이 원하는대로 작동합니다. 별로 차이가 없어야하는 img 대신에 div을 사용하고 있습니다.

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

스크린 샷 :