我正在尝试创建一个简单的幻灯片。有些事情不太对,我不确定是什么。由于某种原因,正在调用 startSlideShow 函数,但未实现“位置”变量的更改...
var timer = null;
var position = 0;
var images = document.querySelectorAll('.slide img');
for (let i = 0; i < images.length; i++) {
images[i].src = 'dog' + i + '.jpg';
var button = document.getElementById('control');
button.onclick = run;
function run() {
if (timer == null) { //stopped or page has just loaded
timer = setInterval(startSlideShow, 4000);
} else {
clearInterval(timer); //this stops animation
timer = null;
}
};
function startSlideShow() {
position++;
images[i].style.left = position + 'px';
};
}
<div class="slideshow">
<div class="slide-container">
<div class="slide">
<img>
</div>
<div class="slide">
<img>
</div>
<div class="slide">
<img>
</div>
<div class="slide">
<img>
</div>
</div>
</div>
<button id="control">Stop/Start</button>