1。キーポイント：
1.ページがロードされると、写真が重複してスタックします[絶対的な位置付け]。
2。最初の写真が表示され、他の写真は隠されています。
3.添え字を設定し、添え字の色を設定して、画像とともに移動するようにします。
4.マウスを写真に移動し、左右の移動アイコンを表示し、マウスを移動し、カルーセルを続けます。
2。実装コード：
HTMLコード：
<！doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titl> carousel chart </title> < href = "css/lunbimg.css" rel = "styleSheet"/> <script src = "js/jquery-1.10.2.min.js"> </script> <script src = "js/lunbimg.js"> </script> </head> <body src = "image/1.jpg"/> </div> <div> <img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <div> <img src = "image/4.jpg"/> </div> <img src = "imag/5.jpg" /> </div> <div> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div >> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </body> </html>
CSSコード：
* {パディング：0px;マージン：0px;}。swapimg {position：aspolute;}。btn{aspose：absolute; height; height; height; height：90px; background：rgba（0,0,0,0.5）;/*背景色を黒に設定し、透明度は透明性です50％*/color：#ffffff; Text-align：center; line-height：90px; font-size：40px; top：155px;/*image height 400/2-45*/cursor：pointer;/*display：none;*/} {position：absolute; top：370px; margin-left：350px;}。タブ{height：20px; width：20px; background：＃05e9e2; line-height：20px; text-align：center; font-size：10px; float：float：color：#ffffff; margin-right：10px; border-radius：100％; coursor：pointer;}。JSコード：
/// <リファレンスパス= "_ REFERENCE.js"/> var i = 0; // global Variable //カルーセルvar時間を取得する変数を定義します。 $（ "。swapimg"）。eq（0）.show（）。 $（this）.index（）; //マウスが変数を取得するプロセスを停止し、カルーセルをクリアし、clear interval（time）;}、function（）{show -time（）;}）; //要件clearInterval（time）; // cileck後、-1if（i == 0）{i = 6;} i-; show（）; showtime（）;}）; $（ "。btnright"）。 -1;} i ++; show（）; showtime（）;}）;}）; function show（）{//$( "#allswapimg").hover（）// {// $（"。btn "）フェードイン、フェードアウト（300）はフェードアウトし、時間0.3S $（ "。swapimg"）。eq（i）.fadein（300）.siblings（）。fadeout（）。$（ "。tab"）。eq（i）.addclass（ "bg"）。 setInterval（function（）{i ++; if（i == 6）{// 6枚の写真しかないので、6を超えることはできません。iが6に等しい場合、最初の画像i = 0;} show（）;}、3000）;}上記は、あなたに紹介されたJavaScriptに基づくCarousel図の実装のコードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！