1

私はこれに不慣れで、簡単な質問があります。ホームページに非常にシンプルなスライドショーがあります。私が抱えている問題は、ページをロードしてから最初の1秒ほどで、スライドショーの画像が上下に表示されます。ページの読み込みの最初の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 に答える