如何使用javascript实现图像幻灯片放映

时间:2013-05-17 05:22:50

标签: javascript html

我尝试实现它。但是......图像从第一个变为秒,然后停止。

供您参考,请找到我试图实施的代码。

<div id="images"> <img  name="slide" src="img/banner1.png"/>
<script type="text/javascript" >
var slideShow=document.getElementById("images");
var allImages= new Array();
allImages=["img/banner3.png","img/banner2.png","img/banner4.png","img/banner5.png"];
var imageIndex=0;
function changeImage()
{
    document.images.slide.src=allImages[imageIndex];
    //slideShow.setAtrribute("src",allImages[imageIndex]);
    console.log("executing 1");
    imageIndex++;
    if(imageIndex >= allImages.length)
    {
       console.log("executing 2");
       imageIndex=0;
    }
}console.log("executing 3");
setTimeout("changeImage()",1000);
console.log("executing 4");
</script>
</div>

有人可以帮我解决这个问题..请!

2 个答案:

答案 0 :(得分:2)

这是您要搜索的类似脚本...

Java脚本

slide=new Array("images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/8.jpg")
pic=0;

function start()
{
setInterval("fun()",3000);
}

function fun()
{
document.show.src=slide[pic];
pic++;
if(pic==6)
pic=0;
}

<强> HTML

<body onLoad="start();>
-------
-------
</body>

答案 1 :(得分:1)

如果您想使用setInterval而不是setTimeout来制作无限幻灯片,那么

setInterval('changeImage()',1000);

更改后,您的代码工作正常。享受。