今日はもうすぐメーデーなので、とても遊びたいです。さて、遅くなりましたので、これ以上の話はせずに、JavaScript を使用して実装された画像の自動回転効果を見てみましょう。まず画像を見てみましょう。 以下は、比較的具体的なコードです。単純。 コードをコピー コードは次のとおりです: .org/1999/xhtml"> ;head> 脱獄囚 > <br>ボーダー:3px 塗りつぶし:3px; <br>高さ:245px; 🎜>位置:相対; <br>.content img{ <br><br>} <br>.content div{ <br>位置:絶対;インデックス:1000; <br>ボーダー:2px 緑; <br>背景:#ccc; <br> .content .cur{background:red;color:white;} // 現在表示されている画像の小さな四角形、背景が赤、フォントが白<br><script type="text/javascript"> <br>var arr=['images/1. jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg']; <br>var i=0; obk; <br>function lunhuan(){ <br><br>if(i>4){// 数値が 4 より大きい場合は 0 から開始します<br>i= 0; ob=document.getElementById("image1"); <br>ob.src=arr[i]; <br>//div-0 から div-4 まで、背景色はグレー表示されます <br>for(var j =0;j<=4;j ){ <BR>document.getElementById("div-" j).style.backgroundColor='#ccc'; <BR>document.getElementById("div -" j).style. color='black'; <BR>obk=document.getElementById("div-" i); <BR>obk.style.backgroundColor='white'; '; <BR>i <BR>} <BR></script> <br><body onload="window.setInterval(lunhuan,1000);"> ><div class="content"> <br><img id="image1" src="images/1.jpg"/> <br><div class="cur" id="div- 0" style="top:215px;right:128px;">1</div> <br><div id="div-1" style="top:215px;right: 98px;">2< /div> <br><div id="div-2" style="top:215px;right:68px;">3</div> <br><div id= "div-3" style= "top:215px;right:38px;">4</div> <br><div id="div-4" style="top:215px;right:8px;">5</div> 🎜></div> <br><input type="button" value="test" onclick="lunhuan();"/> <br></body> <br><br> <br>プロセスについて簡単に説明します。 <br><br>1. 最初に最も外側の DIV を定義します。<br><br>2. 次に、画像 DIV <br>3. 画像の右下隅にある小さな正方形の DIV <br><br> は、タイマー機能を使用して画像を回転し、小さな正方形にも対応する変更を生成します。 <br><br>よし、寝よう。</div>