純粋なCSSやJavaScript、jQueryのシンプルなカルーセル図

　　またはクリックを完了すると、自動的にデジタル図カルーセルを切り替えることができます

HTMLコードが唯一のdivは絵と私たちの主なアイデアのリストが含まれ、対応する番号をクリックすることである必要があり、画像のパスを変更します。

長いパスがそれに画像を変更すると画像を交換するための4枚の画像のimgという名前のフォルダimg1.png、img2.png、img3.png、img4.pngがあり、

ちょうどその上に画像を配置する必要がCSSコードリスト

         < DIV >         
            < IMG SRC = "IMG / img1.png" クラス= "バナー" >             
            < UL > 
                < 李> 1 </ 李> 
                < 李> 2 </ 李> 
                < リチウム> 3 </ 李> 
                < 李> 4 </ 李> 
            </ UL > 
        </ DIV >

* { 
                マージン：0。
                パディング：0; 
            } 
            DIV { 
                幅：210px; 
                マージン：20ピクセルオート; 
                / *国境：1pxの赤色の固体。* / 
                
                位置：相対; 
            } 
            のLi { 
                リストスタイル：なし。
                フロート：左; 
                幅：20ピクセル; 
                高さ：20ピクセル; 
                背景色：緑; 
                余白左：12ピクセル; 
                テキスト整列：センター; 
                行の高さ：20ピクセル; 
                色：白;
                境界半径：50％。//李变成圆型
                -sizeフォント：10pxの; 
                カーソル：//ポインタは、マウスポインタは、Li変化する移動      
            } 
            
            
            UL { 
                位置：絶対し; // UL画像の下に配置
                トップ：250ピクセル、
                左：30px; 
            }

最も重要なのは、我々がjQueryの方法です

    // 変数、開始値を設定し、即ち第一の画像
                のvarインデックス= 1 ;   
             // 2秒ごとに一度実行タイマ機能、設定
            VARタイマ=たsetInterval（ "AA（）"を、2000年）;                
             // タイミング関数呼び出し方法
            関数AA（）{
                 // 三オペレータ、開始値、インデックス= 4インデックスは、インデックス再割り当てするまで+1、続いて、インデックス+ 1に等しい 
                指数=（インデックス$ ==（ "LI"）の長さ）1：指数+ 1 ;  
                 // 画像のsrc属性の設定 
                "バナー" $を（）ATTR （{ "SRC" :. "IMG / IMG" +インデックス+ "PNG" }）     
            } 
            $（ドキュメント）。READY（ 関数（）{
             // 我々は、マウスのLiを移動すると
                $（ "李"）ホバー（関数（）{ 
                    てclearInterval（タイマ）; // クリアタイミング機能 
                    $（ "バナー"）のattr（{ "SRC" :. "IMG / IMG" + $（この）の.text （）+ "PNG"}）// 現在のテキストのLiを取得する画像のsrc値を設けている
                    
                }、関数（）{ // マウス再開タイミング機能アウト 
                  タイマー=たsetInterval（ "AA（）"、2000年）; 
                
                } ）
                
            }）

プロジェクトの多くは、画像がパス・アレイに配置されたことも可能であることができるなど、改訂および改善することができます。

、マップカルーセルすべての画像のページに直接入れているそのうちのいくつかは、その後、映像ショーと非表示をさせ、多くの方法があります。

純粋なCSSやJavaScript、jQueryのシンプルなカルーセル図

おすすめ