基于Vue3實現(xiàn)旋轉木馬動畫效果

更新時間：2022年05月10日 08:38:01 作者：zhazhali_fenqi

這篇文章主要為大家介紹了如何利用Vue3實現(xiàn)旋轉木馬的動畫效果，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下

做的比較丑最后圖片

本來打算用vue-carousel-3d這個組件的，但是這個組件一直報源碼錯誤，修改了半天也沒有解決

效果圖

實現(xiàn)代碼

使用了swiper組件

html部分代碼

  <div class="swiper-container swiper1" style="height: 650px;width: 1500px">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/trunkRoad.png" alt="" />
            <br>
            <el-button type="primary" @click="jumpUrl1">國省干道</el-button>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/bikeSystem.png" alt="" />
            <br>
            <el-button type="primary" @click="jumpUrl2">自行車系統(tǒng)</el-button>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/bridge.png" alt="" />
            <br>
            <el-button type="primary">橋梁</el-button>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/cityExpressway.png" alt="" />
            <br>
            <el-button type="primary">城市快速路</el-button>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/resultIntegration.png" alt="" />
            <br>
            <el-button type="primary" @click="jumpUrl3">結果集成</el-button>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/trunkRoad.png" alt="" />
            <br>
            <el-button type="primary">高速公路</el-button>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box-card">
            <img src="../../assets/homeScroll/bikeSystem.png" alt="" />
            <br>
            <el-button type="primary" @click="jumpUrl2">自行車系統(tǒng)</el-button>
          </div>
        </div>
      </div>
      <!-- 如果需要分頁器 -->
      <!--      <div class="swiper-pagination"></div>-->

      <div class="swiper-button-prev"></div>
      <!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
      <div class="swiper-button-next"></div>
      <!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
    </div>

js部分代碼

import { onMounted } from "vue";
import Swiper, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  Pagination,
  Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
// swiper-bundle.min.css 決定了小圓點和左右翻頁，如果不需要可以不引用
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 決定了基礎的樣式
import "swiper/swiper.min.css";

export default {
  setup() {
    onMounted(() => {
      new Swiper(".swiper1", {
        // 循環(huán)
        loop: true,
        //每張播放時長3秒，自動播放
        spaceBetween: 40,
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 5,
        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false,
        }
      });
    });
  },
  methods:{
    jumpUrl1(){
      const routeData = this.$router.replace({
        path: '/index',
      });
      // window.open(routeData.href, '_blank');
    }
  }
}

到此這篇關于基于Vue3實現(xiàn)旋轉木馬動畫效果的文章就介紹到這了,更多相關Vue旋轉木馬內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: