vue如何解決輪播圖(Swiper)第一張圖片一閃而過(guò)問(wèn)題

更新時(shí)間：2023年01月13日 15:20:28 作者：李湘湘

這篇文章主要介紹了vue如何解決輪播圖(Swiper)第一張圖片一閃而過(guò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue輪播圖(Swiper)第一張圖片一閃而過(guò)

解決方式

初始化(Swiper)時(shí)，外層添加一個(gè)定時(shí)器

代碼：

setTimeout(function() { 
				var mySwiper = new Swiper($(el), {
					autoplay: true,//可選選項(xiàng)，自動(dòng)滑動(dòng)
                    speed:500,//切換時(shí)間
					loop : true,
					pagination : pagination,
					paginationType : paginationType,
				// 	observer:true,
				// 	observeParents:true,
				// 	onSlideChangeStart: function(swiper){ 
				// 		swiper.update();
				// 		swiper.reLoop();  
				// 	},
					prevButton: $(el).find('.swiper-button-prev'),
					nextButton: $(el).find('.swiper-button-next'),
				})
    		    }, 500)

vue圖片輪播實(shí)現(xiàn)過(guò)程

效果圖：

由于沒(méi)有素材就隨便找了123456來(lái)代替選中的圓點(diǎn)。

實(shí)現(xiàn)思路

首先綁定數(shù)據(jù)源，循環(huán)出每個(gè)圖片，在通過(guò)isShow字段來(lái)判斷是否顯示圖片。在圖片元素寫這兩個(gè) v-bind:src="item.src" v-show="item.isShow" 一個(gè)src用來(lái)顯示圖片，show用來(lái)判斷圖片是否顯示。

再為123456下面這個(gè)導(dǎo)航添加點(diǎn)擊事件，通過(guò)點(diǎn)擊的元素來(lái)設(shè)置該數(shù)據(jù)顯示出圖片，同時(shí)其他圖片隱藏。

然后在vue created方法調(diào)用開(kāi)始循環(huán)事件，來(lái)實(shí)現(xiàn)圖片輪播。并用一個(gè)屬性記錄起來(lái)，方便后面停止循環(huán)。

開(kāi)啟輪播后，判斷當(dāng)前顯示的圖片是否是最后一張如果是就從1開(kāi)始，如果不是則下標(biāo)加+1去顯示下一張圖片。

全部代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>vue輪播圖</title>
</head>
<script src="vue.min.js"></script>
<script src="clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<style type="text/css">
#test{text-align: center;margin:0 auto;}
.baner{}
.baner img{width:700px;height: 500px;}
.num{margin-top: 20px}
.num a{color: black;}
.num a span{ margin-left: 30px;font-size: 20px; text-decoration:none;}
/*.num a:hover{color: red;}*/
.isSelect {color: red;}
</style>
<body>
	<div id="test">
		<h1>vue輪播圖</h1>
		<div class="baner">
			<div class="banerimg" v-for="item in dataList">
				<img v-bind:src="item.src" v-show="item.isShow">
			</div>
			<div class="num" @mouseover="focusImg()" @mouseout="startInterval">
				<a href="javascript:void(0)" v-for="item in dataList"  @click="changeImg(item.seq)">
					<span  :class={'isSelect':item.isShow}>{{item.seq}}</span>
				</a>
			</div>
		</div>
	</div>
</body>
<script >
	new Vue({
		el : "#test",
		data: {
			interval:'',
	        dataList:[
	        	{name:'1',src:'banerSroll1.jpg',isShow:true,seq:1},
	        	{name:'2',src:'banerSroll2.jpg',isShow:false,seq:2},
	        	{name:'3',src:'banerSroll3.jpg',isShow:false,seq:3},
	        	{name:'4',src:'banerSroll4.jpg',isShow:false,seq:4},
	        	{name:'5',src:'banerSroll5.jpg',isShow:false,seq:5},
	        	{name:'6',src:'banerSroll6.jpg',isShow:false,seq:6},
	        ],
    	},
    	created:function(){
    		this.startInterval();
    	},
    	methods:{
    		changeImg :function(seq){
    			var newData = this.dataList;
    			for (var i = 0;i <newData.length; i++) {
    				if(newData[i].seq==seq)
    					newData[i].isShow=true;
    				else
    					newData[i].isShow=false;
    			}
    			this.dataList = newData;
    		},
    		startInterval:function(){
    			let that = this;
	    		this.interval = setInterval(function(){ 
		            that.scollImg();
		        },1000)
    		},
    		scollImg:function(){
    			var newData = this.dataList.filter(function(val){return val.isShow})[0];
    			if(newData.seq==this.dataList.length){
    				this.changeImg(1);
    			}else{
    				this.changeImg(newData.seq+1);
    			}
    		},
    		focusImg :function(){
    			clearInterval(this.interval);
    		}
    	},
    	computed :function(){
    		
    	}
	})
</script>
</html>