我有以下代码:
<script type="text/javascript">
var image1=new Image()
image1.src="images/natandadam.jpg"
var image2=new Image()
image2.src="images/gardaa.jpg"
var image3=new Image()
image3.src="images/marmaris.jpg"
var image4=new Image()
image4.src="images/gardab.jpg"
var image5=new Image()
image5.src="images/engagement.jpg"
var image6=new Image()
image6.src="images/gardac.jpg"
var image7=new Image()
image7.src="images/natandadamlake.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images) {
return;
}
document.images.slide.src=eval("image"+step+".src");
if (step<7) {
step++;
} else {
step=1;
}
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500);
}
slideit();
//-->
</script>
...这称之为:
<img style="border:6px double #545565;" src="gardaa.jpg" name="slide" width=600 height=400>
我希望它继续跳过图像,但它停在最后一张图像上。当它只有三个图像时,它就会重复;现在我添加了更多已停止的内容。
我需要改变什么才能让它们重复?
最佳答案
您可以大大简化您的脚本:
<script type="text/javascript">
var images ="natandadam.jpg,gardaa.jpg,marmaris.jpg,gardab.jpg,engagement.jpg,gardac.jpg,natandadamlake.jpg".split(",")
var step=1
function slideit(){
document.images.slide.src="images/" + images[step]
step++
if(step>images.length) {
step = 1
}
setTimeout(function(){slideit()},2500);
}
slideit();
</script>
一些提示:
1 - 您不需要使用 <!--
和//-->
隐藏你的脚本。唯一需要此功能的浏览器已于 90 年代消亡。
2 - 不要使用 eval()
,这是邪恶的。
3 - 由于图像现在位于数组中,因此您可以根据需要检查添加或删除以及许多图像,而无需使用 if (step<7)
。该代码仅检查数组的长度。
4 - 在 setTimeout 中使用所谓的匿名函数,而不是引用代码。引用代码使用eval(
)内部。
关于javascript - 如何让我的幻灯片重复播放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5464951/