0

画像を自動的に変更する非常に単純な画像スイッチャーを作成する必要があります。次のコードがあります。

<div class="imgCarousel">
   <div class="imgC1 left"><img src="/media/1614/1_1.jpg" alt="img1" /></div>
   <div class="imgC2 left"><img src="/media/1615/2_1.jpg" alt="img2" /></div>
   <div class="imgC3 left"><img src="/media/1616/3_1.gif" alt="img3" /></div>
   <div class="imgC4 left"><img src="/media/1617/4_1.jpg" alt="img4" /></div>
   <div class="imgC5 left"><img src="/media/1618/5_1.jpg" alt="img5a" /></div>
   <div class="imgC6 left"><img src="/media/1620/6_1.jpg" alt="img6a" /></div>
   <div class="imgC7 left"><img src="/media/1622/7.jpg" alt="img7" /></div>
</div>

上記の画像のうち 2 つは、一定時間後 (3 ～ 4 秒ごと) に自動的に切り替わります。これは、4 秒後に/media/1618/5_1.jpgという画像を別の画像に変更したいということです。さらに 4 秒後、もう一度元に戻ります。私の他の画像の1つについても同じことが行われるべきです。jQueryでこれを達成するにはどうすればよいですか?

4

2 に答える 2

1

私はあなたのためにそれをコーディングしません...そして犬を殺す方法はたくさんあります...

このリンクまたはjQueryメソッドを読んでください...

いくつかのコードを開始し、コードに問題があるときに戻ってきます...

于 2010-06-10T07:46:32.187 に答える
1

コードを参照として使用すると、必要な div を表示/非表示にする setInterval を使用できます。ただし、それを行うには数十の異なる方法があります。

setInterval は次のようになります。

var loop = setInterval("nextImage()",1000);

次に、 nextImage() は画像を表示/非表示にします。例として jQuery を使用します。

var index = 0;
var images_size = $(".imgCarousel div").size();

function nextImage(){
// we hide all the divs and show the next one only
$(".imgCarousel div").hide();
$(".imgCarousel div").eq(index).show();
// we continue the iteration
index = index+1;
if(index >= images_size){ index = 0; }
}

これは一例としての簡単で汚い即興演奏ですが、繰り返しになりますが、それを行う方法はたくさんあります。プリロードの場合は 、 のような機能をチェックし、スムーズな遷移/効果の場合は 、 ... のようload()な機能をチェックすることをお勧めします。src()fadeIn()fadeOut()

于 2010-06-10T08:01:20.877 に答える