vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)
生活随笔
收集整理的這篇文章主要介紹了
vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很久之前寫過一篇用js按鈕實現切換圖片效果。
現在用vue實現一個輪播圖，可以實現點擊按鈕左右翻頁、每隔兩秒自動翻頁、翻到最后一頁自動返回第一頁。
實現結果如下：
具體的實現邏輯如下面的代碼所示，使用時需把圖片數組里的圖片替換為自己的圖片即可。
實現代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>圖片切換</title><link rel="stylesheet" href="./css/index.css" /> </head><body><div id="mask"><div class="center"><h2 class="title"><img src="./images/logo.gif" alt="">Vue輪播圖</h2><!-- 圖片 --><img :src="imgArr[index]" alt="" /><!-- 左箭頭 --><a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left"><img src="./images/prev.png" alt="" /></a><!-- 右箭頭 --><a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right"><img src="./images/next.png" alt="" /></a></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#mask",data: {imgArr: ["./images/00.jpg","./images/01.jpg","./images/02.jpg","./images/03.jpg","./images/04.jpg","./images/05.jpg","./images/06.jpg","./images/07.jpg","./images/08.jpg","./images/09.jpg","./images/10.jpg",],index: 0},methods: {fun:function(){//setInterval(函數體,時間)setInterval(this.next,2000)},prev:function(){this.index--;},next:function(){this.index++;if(this.index == this.imgArr.length){this.index = 0;}}},mounted:function(){ //生命周期 鉤子函數 掛載完成this.fun()}})</script> </body></html>總結
以上是生活随笔為你收集整理的vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PAT (Basic Level) Pr
- 下一篇： vue+element paginati