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

Question

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

所以，问题是：

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

我猜想也许是 bcz，当我重新加载网站时，以前的 onlaod 也继续工作，所以就像有 2 个幻灯片放映或类似的东西，所以从其他解决方案中，我想我必须将 onload=null 放在某个地方也许，但我无法完全弄清楚。

任何帮助将不胜感激。

这是我的幻灯片 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 链接。