0

そのため、javascript を使用して独自の基本的な画像スライダーを作成しようとしていますが、うまくいきません。3つの画像間で回転させたい。ここに ym javascript があります:

var count = 1;

setInterval(function animate() {

var slides = document.getElementsByClassName("slide");

for(var i=1; i <slides.length+1; i++) {
    if(i == count) {
        slides[i-1].width = "170px";
    } else {
        slides[i-1].width = "0px"
    }
}

if(count == 3) {
    count = 1;
} else {
    count++;    
}

}, 1000);

そして、ここに私のhtmlがあります

<div id="s1" class="slide"></div>
<div id="s2" class="slide"></div>
<div id="s3" class="slide"></div>

私がやりたいことは、現在表示されているスライドの高さを 170px に変更し、他のスライドの高さを 0px に変更することだけです。しかし、何があっても最初のスライドにとどまります。

4

3 に答える 3

0

画像要素が含まれていないため、この例は少し単純化しすぎているようです。HTML が次のようになっていると仮定します。

<div id="s1" class="slide"><img src="s1.jpg"/></div>
<div id="s2" class="slide"><img src="s2.jpg"/></div>
<div id="s3" class="slide"><img src="s2.jpg"/></div>

問題は、コンテナ div のサイズがその子のサイズに影響を与えず、div の外にはみ出すことです。 これがどのように機能するかについての良いブログ投稿です。Firebug のようなツールで DOM を見れば、これは簡単にわかります。

これを修正する簡単な方法の 1 つは、CSS プロパティ「overflow: hidden」を .slide クラスに追加することです。

.slide {
  overflow: hidden;
}

これにより、div の外にあるものはすべて消えます。

于 2013-07-20T05:00:06.423 に答える