Vueの練習二十から九：04_02_自動再生_スライドショー効果

デモオンラインアドレス：
https://sx00xs.github.io/test/29/index.html
----------------------------- ----------------------------------
IDE：VSCode
ファイル形式：.vue

PS：フェード効果が達成されていない、変更する必要
解像度：

要件：

5枚の画像は、2秒ごとに自動的に次に切り替わり

マウスを動かして、静止画

マウスのうち、画像回復を切り替えるタイミング

ボタンの上にマウス、ピクチャは対応するピクチャボタンに切り替わり

絵表示がフェードに切り替えられた場合

パラメータ（ピクチャインデックスを）受け入れるヘルパー関数を書く、現在のクラスのすべての画像を取り除くために、インデックスは写真は現在のクラスを追加対応します

5枚の画像は、2秒ごとに自動的に次に切り替わり

回答：

最初のデフォルト表示の後、次の2秒に切り替えます

各画像に設定されたインデックスのインデックスを与えます

、すべての画像が偽、インクリメントインデックスに設定item.isActiveごとに2秒後に、のsetIntervalを使用して、真のisActiveの対応する画像を設定します

マウスを動かして、静止画

マウスのうち、画像回復を切り替えるタイミング

回答：

破壊にマウスを扱うのsetIntervalとき

マウスが削除され、回復間隔

ボタンの上にマウス、ピクチャは対応するピクチャボタンに切り替わり

回答：

ボタンの上に、画像インデックスに対応するボタンは、ヘルパーに合格しました

絵表示がフェードに切り替えられた場合

回答：

移行コンポーネントに包まれた写真、設定クラス、自動アプリケーション

<テンプレート> 
    の<divクラス= "ボックス" @マウスオーバー= "handleBoxOver" @マウスアウト= "handleBoxOut"> 
        <遷移グループタグ= "UL"名前= "フェード" 
        
        > 
            <LIのV- ための "写真でPIC" =：キー= "pic.src"：クラス= "{電流：pic.isActive}"データ・インデックス= "pic.count"> 
                <IMG：SRC = "pic.src" V- なら = "pic.isActive"幅= "490"高さ= "170"> 
            </ LI> 
        </遷移族> 
        <ULクラス= "カウント"> 
            <LIのV- ための "写真の項目" =キー= "item.count"。クラス= "{電流：item.isActive}" 
            @mouseover = "handleCountOver（item.count）" 
            > 
                {{item.count+1 }}
             </ LI> 
        </ UL> 
    </ div> 
</テンプレート> 
<スクリプト> 
からインポート{たsetInterval、てclearInterval} 'タイマー' 。
輸出のデフォルト{ 
    名： 'NAVS' 、
    データ（）{ 
        リターン{ 
            インデックス： 0 、
            タイマー：ヌル、
            遊び：ヌル、
        写真：[ 
            { 
                SRC：必要（ '../assets/lesson4/01.jpg' ）、
                のisActive ：真、
                カウント： 0 
            }、
            { 
                srcは：（必要 '../assets/lesson4/02.jpg' ）
                のisActive：偽、
                カウント： 1 
            }、
            { 
                SRC：必要（ '../assets/lesson4/03.jpg' ）
                のisActive：偽、
                カウント： 2 
            }、
            { 
                SRC：（必要 '../assets/lesson4/04.jpg' ）
                のisActive：偽、
                カウント： 3 
            }、
            { 
                SRC：（必要 '../assets/lesson4/05.jpg' ）
                のisActive：偽、
                カウント： 4 
            } 

        ] 
        } 
    }、
    メソッド：{ 
        handleBoxOver（）{ 
            てclearInterval（この.play）。
        }、
        handleBoxOut（）{ 
            この.auotPlay（）
        }、
        auotPlay（）{ 
            VARの _this = この;
            この .play =たsetInterval（関数（）{ 
                _this.index++ ; 
                _this.index > = _this.pics.length &&（_this.index = 0 ）。
                _this.show（_this.index）
            }、 2000 ）
        }、
        ショー（カウント）{ 
            
            この .INDEXは= 数えます。
            用（VAR i = 0; I < 本 .pics.length; iは++）この .pics [I] .isActive = 偽。
            この .pics【この .INDEX] .isActive = 真。
        }、
        handleCountOver（カウント）{ 
            この.SHOW（数）
        }、
        入力（行わEL）{
             
        }、
        休暇（EL、行わ）{ 
            
        } 
    }、
    作成（）{ 
        この.auotPlay（）。
    } 
}
 </ SCRIPT>

Vueの練習二十から九：04_02_自動再生_スライドショー効果

おすすめ