javascript图片幻灯片无法正常工作
[英]javascript image slideshow not working
问题描述
I've made a javscript code to rotate 3 images every 2 seconds.But it doesn't execute properly.I only see the first image.I'm a beginner at javascript.Please explain what i'm doing wrong.Also,could anyone suggest a good book on javascript. 
我制作了一个javscript代码，每2秒旋转3张图像。但是它执行不正确。我只看到第一个图像。我是javascript的初学者。请解释我做错了什么。任何人都推荐一本关于javascript的好书。
Here's the code:_ 这是代码：_
<html>
<head>
<title>slide</title>
<script type="text/javascript">
<!--
img1=new Image();
img1.src="arch.jpg";
img2=new Image();
img2.src="apartments.jpg";
img3=new Image();
img3.src="streets.jpg";
-->
</script>
</head>
<body>
<script type="text/javascript">
function slide(i)
{
if(i==1)
{
document.getElementById("pic").src=img2.src;
}
if(i==2)
{
document.getElementById("pic").src=img3.src;
}
if(i==3)
{
document.getElementById("pic").src=img1.src;
}
if(i<3)
{
i++;
setTimeout("slide(i)",2000);
}
else
{
i=1;
setTimeout("slide(1)",2000);
}
}
document.getElementById('button').addEventListener("click",setTimeout("slide(1)",2000),false);
</script>
<img src="arch.jpg" id="pic"></img>
<input type="button" value="Click" id="button"></input>
</body>
</html>
2 个解决方案
解决方案1
0 2015-06-26 18:11:44
You use setTimeout not quite correctly, after the delay parameter you can pass some other values( "a string" ) that the callback function is going to receive: 您使用setTimeout的方式不太正确，在delay参数之后，您可以传递回调函数将要接收的其他一些值（ “字符串” ）：
setTimeout(function(val){
console.log(val);// "a string"
},1000,"a string");
It's worth trying to pass variable i as third parameter into setTimeout: 值得尝试将变量i作为第三个参数传递给setTimeout：
if(i<3)
{
setTimeout(slide,2000,++i);
}
else
{
i=1;
setTimeout(slide,2000,i);
}
Hope this helps. 希望这可以帮助。
解决方案2
0 2015-06-26 18:19:59
Here is a crude yet functional one I just put together. 这是我刚刚整理的粗略但实用的代码。 Noticed how I used setTimeout, also as you can see there are ways to condense your slide function as well.. 注意了我是如何使用setTimeout的，正如您所看到的，还有一些方法可以压缩幻灯片功能。
var i=0,
baseUrl = 'http://i.imgur.com/',
images = ['la7nDkI','Kdmzy1z','RtelUKm'],
slide = function(index){
document.getElementById('pic').src = baseUrl + images[i] + '.png';
},
loop = function(){
setTimeout(loop, 1000);
slide(i);
i++;
if(i === images.length){
i=0;
}
};
loop();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.