VUEは、カルーセル効果を実現します

結果は以下の通りであります：

 

 

テンプレートLANG = " HTML " > 
  <divのクラス = " バナー" @マウスオーバー= " endAutoPlay（）" @マウスアウト= " startAutoPlay（）" > 
    <HREF = " javascriptの:; "  クラス = " BTN PREV " @クリック= " PREV（）" >上一项</a>に
    は、<a href = " javascriptの:; "  クラスは = " 次BTN 」クリック= @ " 次の（）" >次</a>の
    <UL クラス = " バナーリスト" > 
      <LIのクラス = " バナーコンテナ"：クラス = " {CUR：インデックス== CUR} " V- ため = " バナーでバナー、インデックス"：キー= " インデックス" > 
        <a href= "javascript:;"> 
          <IMG：SRC = " banner.src " > 
        </a>の
      </ LI> 
    </ UL>
    <オールクラス ="番号リスト" > 
      <LI：クラス = " ：{活性指数== CUR} " V- ため = " バナー、旗のインデックス"マウスオーバー= @ " CUR =インデックス" > </ LI> 
    </ OL> 
  </ DIV> 
</テンプレート> 

<スクリプト> 
輸入IMG1 から ' @ /資産/画像/ banner1.jpg ' 
輸入IMG2 から ' @ /資産/画像/ banner2.jpg ' 
輸入IMG3 から 「@ /資産/画像/ banner3.jpg "
輸出のデフォルト{ 
  データ（）{ 
    リターン{ 
      CUR：0 、
      バナー：[{SRC：IMG1}、{SRC：IMG2}、{SRC：IMG3}]、
      タイマー：ヌル
    } 
  }、
  作成（）{ 
    この.startAutoPlay（）。
  }、
  beforeDestroy（）{ 
    この.endAutoPlay（）。
  }、
  メソッド：{ 
    PREV（）{ 
      場合（この .CURの== 0 ）{
         この .CUR = この .banners.length- 1 。
      } 他{
         この .cur-- 。
      }
    }、
    次の（）{ 
      場合（この .CUR == この .banners.length- 1 ）{
         この .CUR = 0 。
      } 他{
         この .CUR ++ 。
      } 
    }、
    startAutoPlay（）{ 
      この .timer =たsetInterval（この .next、2000 ）。
    }、
    endAutoPlay（）{ 
      てclearInterval（この.timer）。
    } 
  } 
}
 </ SCRIPT> 

<スタイルLANG = " CSS "スコープ>
 / *バナー* / 
.banner {高さ：420px;位置：相対;} 
.banner -container {幅：1920px;高さ：420px;位置：絶対;左：0 ;上部：0 ; z屈折率：1 ;不透明度：0 ;遷移：全容易} .7s 
.banner - 容器IMG {幅：1920px;高さ：420px;} 
.banner -container.cur {不透明：1 ;} 

.banner .btn { 
  位置：絶対します。
  Z -index：2 。
  左：50％;トップ：200pxの。
  テキスト -indent： - 99999px。
  幅：は50px;高さ：は50px;ボーダー -radius：50％。
  背景 - 色：＃1 D0C4AF。
  背景 -image：URL（../資産/画像/ icon2.png）。
  背景 -repeat：NO- 繰り返し。
} 
.banner .btn：ホバー{背景 - 色：＃1 B19E7A;} 
.banner .btn.prev {背景位：0 -5384px;マージン左： - 605px;} 
.banner .btn.next {背景位：0 -5604px; margin- 左：555px;} 
.banner .NUMBER -list {位置：絶対;左：0 ;幅：100％;底：4PX;テキスト整列：センター; Zインデックス：2;} 
.banner .NUMBER - リストのLi { 
  表示：インライン - ブロック。
  幅：8px;高さ：8px; 
  マージン：0 8px 10pxの; 
  カーソル：ポインタ; 
  背景：#FFF; 
  ボーダー -radius：50％; 
  国境：1pxの固体#cecece。
  遷移：全やすさを.7s 
} 
.banner .NUMBER - リスト.active { 
  背景：＃1 a7936e。
  ボックス -shadow：0  0  0 4PX #dfcead。
}
 </スタイル>