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のウェブサイトへのご支援ありがとうございます!