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时，onload标签上的img事件将为再次执行（因为已加载图像）。因此，将再次调用setSlide()，这将设置另一个间隔来调用chgPic()方法。等等，我很惊讶您的浏览器没有崩溃。

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

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

然后在此处调用setSlide()方法。

尽管，我不建议您按照自己的方式进行。您可以使用一些简单的jQuery和CSS使其起作用。看一下this链接。

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

1 个答案: