替代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而不是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");
    }
});

截图：