这是一个演示。我认为它像你想要的那样工作。我使用的是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");
}
});
截屏: