ネイティブjsがdiv要素の簡単なカルーセルビューを達成します

元地方jsがカルーセルマップを達成します。

自動的にページを開いて画像を回転させ、対応する画像に1-5スイッチをクリックして、前に、前/次の画像を切り替えるためのボタンをクリックしてください。

コードへのリンク：https://github.com/sandraryan/practise/blob/master/js/%E8%BD%AE%E6%92%AD%E5%9B%BE.html

画像を追加することなく、div要素を達成することができ、おそらく長い道のり

CSSコード：

.wrap {
         / * 展示区域样式* / 
        幅：500pxなど。高さ：400ピクセル ; 
        ボックスシャドウ：0 10pxのRGBA（0,0,0、0.5） 。
        表示：フレックス。
        オーバーフロー：隠されました ; 
        位置：相対 ; 
    } 
    .swipe { 
        幅：2500px。
        表示：フレックス。
        位置：絶対 ;
        左：0 ;
         / * それ以外の場合は競合する、タイマー時間が一定の時間を超えることができない、トランジション効果を追加する画像を変更する* / 
        遷移を：.8s ; 
    } / * ラウンドサブエレメントスタイルブロードキャストされる* / 
    ■は { 
        幅：500pxなどを ; 高さ：400ピクセル、
        背景色：RGB（228、226、226） ; 
        色：#FFF ; 
        フォントサイズ：200pxの ; 
    } 
    ボタン { 
        幅：100pxに
    ; 高さ：40ピクセル ; 
        マージン：10pxの5pxの ; 
        国境半径：8px ; 
        背景色：RGB（202、202、202） 。
        フォントサイズ：22px ; 
        色：白 ; 
    }

ページの構造：

<！ - 一些按钮- > 
    < ボタンクラス= "PREV" > PREV </ ボタン> 
    < ボタンクラス= "次" >次</ ボタン> 
    < BR > 
    < ボタンクラス= "BTN" > 1 </ ボタン> 
    < ボタンクラス= "BTN" > 2 </ ボタン> 
    < ボタンクラス= "BTN" >3 </ ボタン> 
    <ボタンクラス= "BTN" >四つ</ ボタン> 
    < ボタンクラス= "BTN" >ファイブ</ ボタン> 
    <！ - 表示領域- > 
    < divのクラス= "ラップ" > 
        <！ - 放送されているホイール親要素- > 
        < divのクラス= "スワイプ" > 
            <！ - サブ要素のリストの周りに放送される- > 
            < divのクラス= "ボックス" > BOX1 </ DIV > 
            <div クラス= "箱" >BOX2 </ divの> 
            < divのクラス= "ボックス" > BOX3 </ divの> 
            < divのクラス= "ボックス" > box4 </ divの> 
            < divのクラス= "ボックス" > box5 </ DIV > 
        </ DIV > 
    </ DIV >

JSコード：

<SCRIPT>
     // 取得要素の
    VAR PREV = document.querySelector（ "PREV。" ）;
     VAR document.querySelector =次（ "次。" ）;
     VAR btns = document.querySelectorAll（ "BTN。" ）;
     VARのスワイプドキュメント= （「スワイプ」.querySelector ）; 

    // 自動再生
    // ラッパー関数
    // 決意インデックスは、左の値の関数として変化
    関数nextFn（）{ 
        インデックス？=指数== 0 4：++ 指数;  
         //は左の要素を標的有効にし 
        swipe.style.left -index * = 500 + "PX" ; 
    } 

    // ファンクションタイマ
    機能自動再生が（）{ 
        autoTinmerはのsetInterval（= 関数（）{
         // 左の初期値は0であり、左側は写真画像幅によって各ピクチャの数は
        // 唯一の5つの画像は、最大左は、4つの可動図を残しています。復元、4時にそう++、インデックス0に等しい指数
       nextFn（）; 
    }、 2000年）; 
    } 
    // ページが自動的に再生を更新します; 
    のautoPlay（）;
     //は、現在の画像ショーの順序宣言
    のvar = -1のインデックスを。
     VaRのautoTinmer; 
   
    // クリックし次へ前へ 
    next.onclick = 機能（）{
         // 自動的に停止し、次の終了最初のショー果たし
        てclearInterval（autoTinmerを）;
         // 次の直後に次のショーをクリックしてください
        nextFn（）;
         // 自動再生続ける
        ;のautoPlay（）
    } 
    prev.onclick = 関数（）{ 
        てclearInterval（autoTinmerを）; 
        // 表示すぐ前のクリック 
        率=指数== 0 4 - ？インデックス、
        スワイプ.style.left = -index * 500 + "PX" 、
        自動再生が（）; 
    } 
    // 配列に対応するボタンをクリックし
    // 1-5ボタンを介してループを
    するための（VARの J = 0; J <btns.length; J ++ ） {
         // 各BTNバインドクリックイベント 
        btns [J] .onclick = 関数（）{
             //自動再生タイマーは停止し
            ;てclearInterval（autoTinmerが）
             // 現在のボタンを取得btnsの順である取得
            //はそれが疑似配列ではなく、配列は、メソッドを使用することはできません配列であるので、indexOfメソッドここでは使用できません
            // getAttributeは、カスタムプロパティ値のhtmlのラベルとして取得
            するvar I = この .getAttribute（「データ-I」;）
             // はconsole.log（I）; 
            // 左スワイプの値に応じて設定されたこの注文 
            swipe.style.left = - * 500 + I "PX" ;
             // タイマー自動再生を復元する
            のautoPlay（）; 
        } 
    }
     </ SCRIPT>

終了（●∀用の●）

ネイティブjsがdiv要素の簡単なカルーセルビューを達成します

おすすめ