カルーセルJSマップの簡易版を書きます

最初のステップは、アイデアとすべきであるストロークを撫で：

1.のようなカルーセル・チャートの外観、および構成するもののその後、カルーセルビューを想像してみてください。

自分の想像力の2カルーセルビューは、絵の真ん中で、その後、自動的に画像を切り替えてきました。

3.ほとんどのメインは、大きな絵の真ん中です。

4.あなたは直接ハングアップするだけでなく、自動的に考慮した後に回転させ、その体を達成するのは容易な表示効果に依存して、その後、divの絵ラップを使用することができIMG写真を使用することができます

5.画像を達成するために、背景画像表示のdiv要素が、このような絵は行くために配置されていたであろう

あなたはすべての画像を達成するために、絶対位置を使用することができます6.位置が領域に配置されています

良い絵が片付けた後7.あなたはカルーセル効果の実装を検討することができます

-------------------------------------------------- ---------------------

8. div要素を使用すると、表示プロパティは、カルーセルの効果を達成するために、ディスプレイに隠された絵を作る使用することができますので、画像を表示することである前に言いました

-------------------------------------------------- ---------------------

良いアイデアのように、次のステップは、アイデアの実現であります

次のコードは、絵の基本骨格を達成する最初のものです：

< ボディ> 
<！ - まず、単純なカルーセルマップ、両方の動画を作成し、いない他の操作- > 
<！ - これは、フレーム全体に責任を置く写真を、DIV - > 
< divのクラス=「mainBox " > 
    < DIV クラス=" PIC picBox1 " > </ DIV > 
    < DIV クラス=" PIC picBox2 " > </ DIV > 
    < DIV クラス=" PIC picBox3 " > </ DIV > 
    < DIV クラス=" PIC picBox4」> </ DIV > 
    <DIV クラス= "PIC picBox5" > </DIV > 
</ DIV >

クラスは、=「mainBox」テーマは、次の位置への位置決め基準として、その主な役割でスケルトンのとき画像のdiv

注：絶対的な基準での位置が初めてではない親タグ静的プロパティ、mainboxの位置を手動で相対に設定されなければならないので

フレームワークで実現HTMLは、次のステップは、CSSコードを達成することです

< スタイル> 
        .mainBox { 
            幅：1250px ; 
            高さ：500pxなど。
            マージン：30px自動; 
            ボーダー：3px固体ピンク。
            オーバーフロー：隠されました; 
            国境半径：は50pxは50px ; 
            位置：相対; 
        } 
        .PIC { 
            幅：1200px 。
            高さ：640x460ピクセル; 
            ボーダー：5pxの固体lightskyblue 。
            マージン：30px 20ピクセル; 
            背景リピート：なしリピート; 
            位置：絶対; 
        } 
        .picBox1 { 
            背景画像：URL（ "Hua_1.jpg"） 。
        } 
        .picBox2 { 
            背景画像：URL（ "Hua_2.jpg"） 。
        } 
        .picBox3 { 
            背景画像：URL（ "Hua_3.jpg"）; 
        } 
        .picBox4 { 
            背景画像：URL（ "Hua_4.jpg"） 。
        } 
        .picBox5 { 
            背景画像：URL（ "Hua_5.jpg"） 。
        } 
    </ スタイル>

次のステップは、JSコードを達成することです

<スクリプト>
     のvar写真= document.getElementsByClassName（ 'PIC' ）;
    VaRのインデックス= 0 ; 
    setInterval（関数（）{ 
        指数 + = 1 ;
         場合（インデックス> = pics.length）{ 
            インデックス = 0 ; 
        } 
        changeImage（）; 
    }、 3000 ）。
    VaRの changeImage = 関数（）{
         用（VARは、 i = 0; iがpics.lengthを<; I + = 1 ）
            の写真[I] .style.display = 'なし' 。
        写真[索引] .style.display =「ブロック」。
    }。
    // のsetInterval（関数（）{にconsole.log（1）}、1000）。
</ SCRIPT>

インデックスは、画像として表示されたインデックス番号です。

これらの中で最高経営責任者は、アプリケーションが画像カルーセル効果を達成するために、このプロパティを表示しています

カルーセル図の最も単純なバージョンである場合、次のステップは、ボタンのカルーセル図を有していてもよい書き込むことです

カルーセルJSマップの簡易版を書きます

おすすめ