javascript - 图像 slider - Javascript

Question

有人知道为什么这段代码没有将我的图像从 1.fw.png 更改为 5.fw.png 吗？

HTML

<div id="slideshow">
 <img id="slider" src="1.fw.png">
</div>

JavaScript

function timer(x){
var timer = setTimeout(function () {switchPic(x);}, 4000);  
}

function switchPic(x){
x += 1;
document.getElementById('slider').src = x + ".fw.png";
}

$(document).ready()(function(){
document.getElementById('slider').src = x;
timer(x);
});

带有转换的图像转换器会是一个好处，但仅更改图像是基本要求。

Answer 1

x 是一个局部变量(一个参数)，因此增量变化不会超过 switchPic 函数。如果有全局 x 则它被隐藏；否则 timer(x) 将导致 ReferenceError - 确保描述什么“不工作”以及如何这是已知的。

我可能会这样写:

jQuery(function ($) {
    var t = -1;               // initial value peicked so x is 1 at first interval
    function switchIt () {
        t++;                  // change variable caught in closure
        var x = (t % 5) + 1;  // loops through values in 1..5
        $('#slider').attr("src", x + ".fw.png");
    }
    // set initial image right away
    switchIt();
    // switch image every 4 seconds, forever
    setInterval(switchIt, 4000);
});