[英]Image Slider- Javascript
有人知道为什么这段代码没有通过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);
});
带有过渡的Image Changer将是一个好处,但是仅更改图像是基本要求。
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);
});
谢谢user2864740,我用您的信息重新编写了代码,它现在也以正确的数字循环。
$(document).ready(function(){
setInterval(function(){
z = document.getElementById('slider').src;
y = z.indexOf(".fw.png");
y = z.slice(y - 1, -7);
x = parseInt(y);
y = (x % 5) + 1;
document.getElementById('slider').src = "/Images/Index/Slider/" + y + ".fw.png";
},4000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.