書き込みVUEへのアセンブリのカルーセルビュー

<テンプレート>
の<divのid = "スライダー">
    <DIV CLASS = "ウィンドウ" @マウスオーバー= "ストップ" @ mouseleave = "遊び">
      <ulのクラス= "コンテナ"：スタイル= "containerStyle">
        <LI>
          <IMG ：スタイル= "{幅：imgWidth + 'ピクセル'}" SRC = "スライダー[sliders.length - 1] .IMG" ALT = "">
        </ LI>
        <LI = V-用」（アイテム、インデックス）にスライダー"：キー= "インデックス">
          <IMG：スタイル= "{幅：imgWidth + 'ピクセル'}" SRC = "item.img" ALT = "">
        </ LI>
        <LI>
          <IMG：スタイル=" {幅：imgWidth + 'ピクセル'} "SRC ="スライダー[0]。IMG」ALT = "">
        </ LI>
      </ UL>
      <ULクラス= "方向">
        <LIクラスは= "左" @ "（、速度600、1）移動"をクリック=>
          <SVGクラス= "アイコン"幅= "30px"高さ= "30.00px"ビューボックス= "0 0 1024×1024"バージョン= "1.1"のxmlns = "http://www.w3.org/2000/svg"> <パスフィル= "＃FFFFFF" D = "M481.233 904c8.189 0 16.379から3.124 22.628から9.372 12.496から12.497 12.496から32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496から32.758 0- 45.255-12.498-12.497-32.758-12.497-45.256 0リットル-360 360C-12.496 12.497から12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z "/> </ SVG>
        </ LI>
        <LIクラス="右"クリック@ ="移動（600、-1、スピード）」>
          <SVGクラス= "アイコン"幅= "30px"高さ= "30.00px"ビューボックス= "0 0 1024×1024"バージョン= "1.1"のxmlns = "http://www.w3.org/2000/svg"> <パスフィル= "＃FFFFFF" D = "M557.179の904C-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496- 32.758 0から45.255 12.498から12.497 32.758から12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 45.255リットル0-360 360C-6.249 6.249から14.439 9.373から22.628 9.373z」/> </ SVG>
        </ LI>
      </ UL>
      < ULクラス= "ドット">
        <LIのV-ため= "（ドット、I）スライダーで"：キー= "i"は
        ：クラス= "{点線：私は===（currentIndex-1）}"
        @click =ジャンプ（I + 1）
        >
        </ LI>
      </ UL>
    </ div>
</ div>
</テンプレート>

* {
        ボックスのサイズ変更：国境ボックス;
        マージン：0;
        パディング：0;
      }
      OL、UL {
        リストスタイル：なし。
      }
      #slider {
        テキスト整列：センター。
      }
      .window {
        位置：相対。
        幅：600PX。
        高さ：400ピクセル;
        マージン：0自動;
        オーバーフロー：隠されました;
      }
      .container {
        ディスプレイ：フレックス。
        位置：絶対;
      }
      、{.RIGHT .LEFT
        位置：絶対と、
        トップ：50％;
        変換：移動Yを（-50％）。
        幅：は50px;
        高さ：は50px;
        背景色：RGBA（0,0,0、0.3）;
        境界半径：50％。
        カーソル：ポインタ;
      }
      .LEFT {
        左：3％。
        パディング左：12ピクセル;
        パディングトップ：10pxの;
      }
      .RIGHT {
        右：3％。
        パディング右：12ピクセル;
        パディングトップ：10pxの;
      }
      IMG {
        ユーザ選択：なし。
      }
      .dots {
          位置：絶対。
          下：10pxの;
          左：50％;
          変換：移動X（-50％）を、
        }
      のLi {.dots
        表示：インラインブロック。
        幅：15ピクセル;
        高さ：15ピクセル;
        マージン：0 3px;
        国境：1pxの白色の固体;
        境界半径：50％。
        背景色：＃333。
        カーソル：ポインタ;
      }
      .dotsは{.dotted
        地色：オレンジ;
      }

スクリプト>
エクスポートデフォルト{
名： 'スライダ'、
小道具：{
    initialSpeed：{
      タイプ：Number、
      デフォルト：30
    }、
    initialInterval：{
      タイプ：Number、
      デフォルト：3
    }
}、
データ（）{
    リターン{
      スライダー：[
        {
          IMG ： 'HTTP：//img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658'
        }、
        {
          IMG： 'HTTP：//img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'
        }、
        {
          IMG： 'HTTP：//img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'
        }、
        {
          IMG： 'HTTP：//img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658'
        }、
        {
          IMG： 'のhttp：/ /img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'
        }
      ]、
      imgWidth：600、
      currentIndex：1、
      距離：-600、
      transitionEnd：真、
      速度：this.initialSpeed
    }
}、
計算：{
    containerStyle（）{
      リターン{
        `translate3d（$ {this.distance} PX、0、0）`：変換
      }
    }、
    間隔（）{
      リターンthis.initialInterval×1000
    }
}、
（）{ 搭載
    this.init（）
}、
メソッド：{
    INITを（）{
      this.play（）
      window.onblur =関数（）{this.stop（）} .bind（本）
      window.onfocus =関数（）{this.play（）} .bind（本）
    }、
    移動（オフセット、方向、速度）{
      にconsole.log（速度）
      であれば（！this.transitionEnd）リターン
      this.transitionEnd = FALSE
      方向=== -1？this.currentIndex + = 600 /オフセット：this.currentIndex - = / 600オフセット
      IF（this.currentIndex> 5）this.currentIndex = 1
      であれば（this.currentIndex <1）this.currentIndex = 5

      CONST宛先= this.distance +オフセット*方向
      this.animate（宛先、方向、速度）
    }、
    アニメーション（DES、DIREC、速度）{
      IF（this.temp）{
        window.clearInterval（this.temp）。
        this.temp = NULL;
      }
      this.temp = window.setInterval（（）=> {
        IF（（DIREC === -1 &&デ<this.distance）||（DIREC === 1 && DES> this.distance））{
          this.distance + =速度* DIREC
        }他{
          this.transitionEnd =真
          window.clearInterval（this.temp）
          this.distance = DES
          （DES <-3000）this.distance = -600なら
          IF（DES> -600）this.distance = -3000
        }
      }、20）
    }、
    ジャンプ（インデックス）{
      CONST方向=索引- this.currentIndex> = 0？-1：1;
      CONSTオフセット= Math.abs（インデックス- this.currentIndex）* 600。
      constのjumpSpeed = Math.abs（インデックス- this.currentIndex）=== 0？this.speed：Math.abs（インデックス- this.currentIndex）* this.speed。
      this.move（オフセット、方向、jumpSpeed）
    }、
    再生（）{
      IF（this.timer）{
        window.clearInterval（this.timer）
        this.timer = NULL
      }
      this.timer = window.setInterval（（）=> {
        this.move（600、-1、this.speed）
      }、this.interval）
    }、
    停止（）{
      window.clearInterval（this.timer）
      this.timer = NULL
    }
}
}
</ SCRIPT>

書き込みVUEへのアセンブリのカルーセルビュー

おすすめ