加载时的图像幻灯片无法正常工作

Question

我知道这个问题已经被问过很多次了，但我检查了其中的大部分，但没有找到解决我的问题的方法，所以我在这里再次提问。

所以，问题是：

我正在做一个电影网站项目。我在我的主页上添加了一些图片作为幻灯片放映，但由于某种原因，幻灯片放映无法正常工作。它有一些小故障，比如有时顺序不正确，有时所有图片都试图同时出现，或者它们变化超快等。

我猜想当我重新加载网站时可能是 bcz，之前的 onlaod 也继续工作所以就像有 2 个幻灯片放映或类似的东西，所以从其他解决方案我想我必须把 onload=某处可能为空，但我无法确切地弄清楚。

任何帮助将不胜感激。

这是我的 html 幻灯片放映代码：

<div class="bg-movies" style="top: 65%;">
    <img src='images/slideshow/war.jpg' width='1000' height='300' 
    onload="setSlide();"/>
</div>

这是我的 javascript 代码：

<script language='javascript'>
    <!--
        var toprated=new Array('sarkar.jpg','hajwala.jpg','96.jpg','war.jpg');
        var pos=0,x;
        document.images[1].src='images/slideshow/'+toprated[0];

        function setSlide(){
            x=setInterval('chgPic()',2000);
        }

        function chgPic(){
                pos=(++pos)%toprated.length;
                document.images[1].src="images/slideshow/"+toprated[pos];
        }
    -->
</script>

Answer 1

你的问题是递归。加载图像后，您将调用 setSlide() 方法。这将设置调用 chgPic() 的时间间隔，但是当调用 chgPic() 方法并更新图像 src 时，img 标签上的 onload 事件将是再次执行（因为图像已加载）。因此 setSlide() 将被再次调用，这将设置另一个间隔来调用 chgPic() 方法。等等等等。我很惊讶你的浏览器没有崩溃。

你应该做的是在页面加载后设置时间间隔（即调用 setSlide() 方法），或者更好的是，如果你准备好使用 jQuery 的文档使用 jQuery:

$( document ).ready(function() 
{
}

并在此处调用您的 setSlide() 方法。

尽管如此，我不建议按照您的方式进行操作。您可以使用一些简单的 jQuery 和 CSS 来让它工作。看看 this link。

加载时的图像幻灯片无法正常工作

Image slideshow at onload not working properly

html

javascript

php

slideshow