javascript - 幻灯片过渡 - Javascript

标签 javascript html slideshow

我正在尝试用 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>

example fiddle

关于javascript - 幻灯片过渡 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38435608/

相关文章:

html - 我的导航栏在幻灯片下方。我想结束,但我想不通

swift - 如何在 Swift 中加载图片幻灯片

javascript - 何时使用 `#` 符号来获取 DOM 元素?

javascript - 从以不同方式编写的 URL 获取 id 的最佳方法是什么?

javascript - PHPList 拥有自己的订阅页面

html - 以大背景为中心的问题

javascript - CSS - 制作 algolia 下拉菜单,结果显示在 Bootstrap 导航栏的下拉菜单上

javascript - 我试图破坏一个 JavaScript 函数

javascript - element2.focus() 在 element1.onblur() 无法在 Fx/Chrome/Safari 中工作后触发 - Salesforce

CSS 幻灯片 - 如何添加图像链接?