脚本不会在图像中循环

时间:2016-06-22 07:48:46

标签: javascript html css

基本上问题是代码没有正确循环显示图像。在我的个人分析中,我认为它与使用css的幻灯片放映功能有关。仅供参考,它显示第一张图片,但不会循环显示。

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "Picture1.png
var image2 = new Image()
image2.src = "Picture2.png"
var image3 = new Image()
image3.src = "Picture3.png"
var image4 = new Image()
image4.src = "Picture2.png"
</script>
</head>
<body>
<p><img src="Picture1.png" width="500" height="300" name="slide" /></p>



<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image2"+step+".src");
            if(step<4)
                step++;
            else
                step=1;
            setTimeout(slideit,3000);
        }
        slideit();
</script>
</body>

1 个答案:

答案 0 :(得分:0)

<!doctype html>
<html>
<head>
<script type="text/javascript">
var images = [];
for(var i=0; i<4; i++) images.push( "Picture"+ ( i + 1 ) +".png" );
</script>
</head>
<body>
<p><img src="Picture1.png" width="500" height="300" name="slide"></p>
<script type="text/javascript">
        var step=0;
        function slideit()
        {
            document.images.slide.src = images[step++];
            step = step % 4;
        }
        window.setInterval(slideit,3000);
</script>
</body>
</html>