幻灯片过渡 - Javascript

Slideshow transition - Javascript

本文关键字：Javascript 幻灯片      更新时间：2023-09-26

我正在尝试用Javascript制作幻灯片库，但它不起作用...当我运行此代码时，src会立即转到veyron.jpg，跳过lamborghini.jpg。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <img id="img" src="ferrari.jpg" />
    <script>
        img = document.getElementById("img");
        images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
        end = images.length -1;
        window.onload = setInterval(slide,1000);        
        function slide(){
            for(i=0;i<=end;i++){
                img.src = images[i];
            }
        }
    </script>
</body>
</html>

为什么循环存在在这里，你正在投射所有图像。

使用带有start的增量变量进行操作 

 <script>
            var img = document.getElementById("img");
            var images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
            var end = images.length -1;
            var start = 0;
            window.onload = setInterval(slide,1000);        
            function slide(){
               img.src = images[start%end];
               start++;
            }
 </script>

示例小提琴

相关文章：