Vue はシームレスなカルーセル効果を実現

この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード

1. サブコンポーネントコード

コードは次のとおりです（例）：

<テンプレート>
  <div>
    <div class="box" @mouseenter="マウス" @mouseleave="マウスリーブ">
      <ul class="box1">
        <li>
          <画像
            :src="n"
            v-for="(n, i) 画像内"
            :key="i"
            代替案=""
            :style="{ 左: (i - インデックス) * 500 + 'px' }"
            :class="hasAni ? 'アニメーション' : ''"
          />
        </li>
      </ul>
      <p class="tt" @click="left">&lt;</p>
      <p class="tt1" @click="right">></p>
    </div>
  </div>
</テンプレート>

スクリプトコードは次のとおりです（例）：

<スクリプト>
エクスポートデフォルト{
  名前:「ルンボ」
  小道具: ["imgs"],
  データ（） {
    戻る {
      // js で画像を使用するには、require を使用して index: 1 をインポートする必要があります。
      hasAni: true、
      真: 真、
    };
  },
  メソッド: {
    ねずみ（） {
      タイマー間隔をクリアします。
    },
    マウスのLeave() {
      this.timer = setInterval(() => {
        this.index++;
        this.hasAni = true;
        (this.index == this.imgs.length - 1) の場合 {
          タイムアウトを設定する(() => {
            this.index = 0;
            this.hasAni = false;
          }, 750);
        }
      }, 1500);
    },
    右（） {
      もしこれが真ならば{
        this.index++;
        this.hasAni = true;
        this.istrue = false;
        (this.index == this.imgs.length - 1) の場合 {
          タイムアウトを設定する(() => {
            this.index = 1;
            this.hasAni = false;
          }, 750);
        }
        タイムアウトを設定する(() => {
          this.istrue = true;
        }, 1000);
      }
    },
    左（） {
       もしこれが真ならば{
        this.index--;
        this.hasAni = true;
        this.istrue = false;
        （this.index == 0）の場合{
          タイムアウトを設定する(() => {
            this.index = this.imgs.length - 1;
            this.hasAni = false;
          }, 750);
        }
        タイムアウトを設定する(() => {
          this.istrue = true;
        }, 1000);
      }
    },
  },
  アクティブ化() {
    コンソールログ(1);
    this.timer = setInterval(() => {
      this.index++;
      this.hasAni = true;
      (this.index == this.imgs.length - 1) の場合 {
        タイムアウトを設定する(() => {
          this.index = 0;
          this.hasAni = false;
        }, 750);
      }
    }, 1500);
  },
  非活性化() {
    タイマー間隔をクリアします。
  },
};
</スクリプト>

<スタイルスコープ>
ｐ {
  幅: 30ピクセル;
  高さ: 60px;
  背景色: rgba(46, 139, 86, 0.356);
  行の高さ: 60px;
  フォントサイズ: 24px;
  位置: 絶対;
  上: 105px;
}
.tt {
  左: 0;
}
.tt1 {
  右: 0;
}
。箱 {
  幅: 500ピクセル;
  高さ: 300px;
  マージン: 100px 自動;
  位置: 相対的;
  オーバーフロー: 非表示;
}
.box1 画像 {
  位置: 絶対;
  左: 0px;
  上: 0;
  幅: 500ピクセル;
  高さ: 300px;
}
.アニメーション {
  遷移: 左 0.75 秒;
}
</スタイル>

2. 親コンポーネントコード

親コンポーネント

<キープアライブ>
      <Lunbo :imgs="imgs" />
</キープアライブ>

モジュールのインポート

「./components/Lunbo」からLunboをインポートします。

画像データ

データ（） {
    戻る {
      画像:[
        必要("./assets/6.jpg")、
        必要("./assets/1.jpg")、
        必要("./assets/2.jpg")、
        必要("./assets/3.jpg")、
        必要("./assets/4.jpg")、
        必要("./assets/5.jpg")、
        必要("./assets/6.jpg")、
        必要("./assets/1.jpg")、
      ]、
    }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: