1

我是新手，有一个快速的问题。我的主页上有一个非常简单的幻灯片。我遇到的问题是加载页面的第一秒左右，幻灯片图像显示在另一个之上。一旦加载页面的第一秒左右结束，一切正常。这是我的javascript代码：

<script type="text/javascript" language="javascript">
        window.onload = function () {
            var rotator = document.getElementById("slideshow_content");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };
    </script>

这是正文代码：

<div id="slideshow">
<div id="slideshow_content" style="padding-top:10px; padding-bottom:10px;">
        <img alt="" src="/images/slide1.jpg" />
        <img alt="" src="/images/slide2.jpg" />
</div>
</div>

这是 2 个 div 的 CSS：

#slideshow {position:relative; top:0; left:0; max-width:1680px; height:342px; margin:0     auto; padding:0; background-color:#070707;}
#slideshow_content {width:960px; max-height:322px; margin:0 auto; padding:0;}

你会如何建议解决这个问题？

4

1 回答 1

1

我会设置 CSS 以在页面加载时隐藏幻灯片，然后当幻灯片开始时它可以被取消隐藏。

这也意味着如果有人禁用了 javascript，他们就不会得到一堆看起来很奇怪的图像。

或者，您可以使用 CSS 隐藏除第一张图片之外的所有图片，这样即使有人禁用了 javascript，他们也会看到第一张图片。

于 2013-01-09T02:01:11.340 回答