Vue はシームレスなカルーセル効果 (マーキー) を実現します

<テンプレート>
  <div>
    <Sweiper v-model="選択済み">
      <!--v-model は構文糖衣であり、値イベントや入力イベントと同等です-->
      <Sweiper-item name="item1">
        <div class="item">
          <img :src="getImg('01')" alt="">
        </div>
      </スワイパーアイテム>
      <Sweiper-item name="item2">
        <div class="item">
          <img :src="getImg('02')" alt="">
        </div>
      </スワイパーアイテム>
      <スワイパーアイテム名="item3">
        <div class="item">
          <img :src="getImg('03')" alt="">
        </div>
      </スワイパーアイテム>
    </スワイパー>
  </div>
</テンプレート>
ここでの画像は、配列を v-for でループしていないので、その構造がわかります<script>
  「../components/Sweiper.vue」からSweiperをインポートします。
  「../components/SweiperItem.vue」からSweiperItemをインポートします。
  エクスポートデフォルト{
    名前: "mySweiper",
    コンポーネント:
      スワイパー、
      スワイパーアイテム
    },
    データ（） {
      戻る {
        selected: "item1", //デフォルトは最初の項目です}
    },
    方法:{
      getImg(url){
        "img/"+url+".jpg" を返します
      },

    },
    マウントされた(){
      /*setInterval(()=>{
       this.selected="item2"
  },3000)
  この時点では、mounted は 1 回しか実行されないため、変更されません。Sweiper で監視リスナーを記述する必要があります}*/この手順は Sweiper コンポーネントに記述されているためコメント化されています}
</スクリプト>
<スタイル>
  。アイテム{
    /*境界線: 1px 黒一色;*/
  }
  .item>画像{
    幅: 100%;
    /*高さ: 0.1rem;*/
  }
</スタイル>

<テンプレート>
  <div class="スワイパー">
    <スロット></スロット>
  </div>
</テンプレート>
<スクリプト>

  エクスポートデフォルト{
    名前:「スワイパー」
    データ（） {
      戻る {
        現在：''
      }
    },
    小道具:{
      価値：{
        タイプ:文字列、
        デフォルト：""
      },
    },
    マウントされた(){
      //自動カルーセル中に名前の値を検索し、indexOf メソッドを使用して現在のカルーセルの次のテーブルをトラバースします this.names=this.$children.map(child=>{
       子の名前を返す
      });
      this.showImg();
      this.paly()
    },
    方法:{
      表示画像(){
        this.current=this.value||this.$children[0].name;
        //現在のインスタンスの直接の子コンポーネント this.$children.map(vm=>{
          vm.selected = this.current
        })
      },

      淡い（）{
        //カルーセルが再生されるたびに画像を調整します this.timer=setInterval(()=>{
          //indexOf は指定された文字列の最初の出現を返します const index = this.names.indexOf(this.current);
          newIndex=index+1 とします。
          //より厳密にする if (newIndex===this.names.length){
             新しいインデックス = 0;
          }
          this.$emit("input",this.names[newIndex])
        },3000)
      }
    },
    時計：{
      //値を監視し、変更があった場合は選択内容を変更する
      価値（）{
        this.showImg()
      }
    },
    破棄する前に() {
      //列が破棄される前に clearInterval(this.timer)
    }
  };
</スクリプト>
<スタイル>
  .スワイパー{
    /*境界線: 1px 黒一色;*/
    幅: 100%;
    高さ: 4rem;
    オーバーフロー: 非表示;
    マージン: 0 自動;
    位置: 相対的;
  }
</スタイル>

<テンプレート>
  <遷移>
    <div class="Sweiper-item" v-show="isShow">
      <スロット></スロット>
    </div>
  </トランジション>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前:"SweiperItem",
    データ（）{
      戻る {
        選択済み:""
      }
    },
    小道具:{
      名前：{
        タイプ:文字列、
        必須:true
      },
    },
    マウントされた(){

    },
    計算:{
      isShow(){
        this.selected===this.name を返します。
      }
    }
  };

</スクリプト>
<スタイル>
  .v-enter-active、.v-leave-active{
    遷移: すべて 1 線形;
  }
  .v-leave-to{
    変換:translate(-100%);
  }
  .v-enter{
    変換: translate(100%);
  }
  .v-enter-active{
    位置: 絶対;
    トップ:0;
    左: 0;
  }
</スタイル>