誰もが好きなJSカルーセルの画像効果、私はあなたとそれを共有します。
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> 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 = </</</> </> </> </</> </> </</> </> </</5.jpg " <div> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div >> </div> <div = "tabs"> <div> </div> <div> 2 </div> 3 </div> <div> 4 </div> div> </div> </div> </div> </div> </div> </div>
CSSコード：
* {パディング：0px;マージン：0px;}。swapimg {position：absolute; } .btn {position：absolute;高さ：90px;幅：60px;背景：RGBA（0,0,0,0.5）;/*背景色を黒に設定し、透明度は50％*/ color：#ffffff;テキストアライグ：センター;ラインハイト：90px;フォントサイズ：40px;上：155px;/*画像の高さ400/2-45*/カーソル：ポインター。 /* display：none;*/ }.btnright {左：840px;/*画像幅900ナビゲーション幅60*/}＃tabs {position：absolute;上：370px;マージン左：350px;}。タブ{height：20px;幅：20px;背景：＃05E9E2;ラインハイト：20px;テキストアライグ：センター;フォントサイズ：10px;フロート：左;色：#ffffff;マージン右：10px;ボーダーラジウス：100％;カーソル：ポインター;}。bg {background：＃00ff21;}JSコード：
/// <リファレンスパス= "_ REFERENCE.JS"/> var i = 0; // global Variable //変数を定義してCarousel var time $（ "。swapimg"）。eq（0）。siblings（）。 //マウスが変数を取得した後、カルーセルをクリアし、function（）{showtime（）}。 -1 if（i = 6）。 function show（）{//$("#allswapimg").hover(function（）// {// $（ "。btn"）。show（）; //}、function（）// {// $（ "。btn"）。hide（）; //}）; // Fadein（300）Fade in、Fadeout（300）はフェードアウト、フィルタリング時間0.3s $（ "。Swapimg"）。eq（i）.fadein（300）.sibling（）。フェードアウト（）; $（ "。タブ"）。eq（i）.addclass（ "bg"）。siblings（）。removeclass（ "bg"）;} function showtime（）{time = setinterval（function（）{i ++; if（i == 6）{// 6枚しか想像できない場合は6枚を超えます。 }、3000）;}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。