vue图片无缝轮播/切换

vue图片无缝轮播/切换

演示效果：

vue图片无缝轮播/切换

HTML代码：

<!-- vueswiper -->
<div class="vueswiperwrap">
	<div class="vueswiper">
		<div class="item" v-for="i in imgArr" :transition="need" v-show="index==$index?true:false">
			<img :src="i" @click="bling()" />
		</div>
	</div>
	
	<!-- 焦点控件 -->
	<ul class="iconlist">
		<li v-for="i in imgArr" @click="add($index)" :class="index==$index?'active':''"></li>
	</ul>
	
	<!-- 左右控件 -->
	<a href="javascript:;" class="to-left fa fa-angle-left" @click="left"></a>
	<a href="javascript:;" class="to-right fa fa-angle-right" @click="right"></a>
	
</div>

<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el:'body',
		data:{//图片列表
			imgArr:["img/img07.jpg",
			"img/img08.jpg",
			"img/img03.jpg",
			"img/img04.jpg",
			"img/img05.jpg",
			"img/img06.jpg"],
			index:0,
			need:"leo",
			timer:null
		},
		
		methods:{
			add:function(idx){//焦点控件
				if(this.index<idx){
					this.need="leo"
				}else{
					this.need="sky"
				}
				this.index=idx
			},
			left:function(){//左控件
				this.need="sky";
				this.index--;
				if(this.index<0){
					this.index=this.imgArr.length-1;
				}
			},
			right:function(){//右
				this.need="leo";
				this.index++;
				if(this.index==this.imgArr.length-1){
					this.index=0;
				}
			},
			bling:function(){//点击图片后自动切换
				let self=this;
				setInterval(function(){
					self.i=self.imgArr[self.index++];
					if(self.index>self.imgArr.length-1){
						self.index=0;
					}
				},5000)
			}
		}
	})
</script>

CSS样式：

/* vueswiper */
.vueswiperwrap{position: relative;width: 100%;height: 100%;box-sizing: border-box;overflow: hidden;}
/* vueswiper */
.vueswiper{width: 100%;height: 100%;position: relative;box-sizing: border-box;}
.vueswiper .item{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;}
.vueswiper .item img{display: block;width: 100%;height: 100%;object-fit: cover;}
/* iconlist */
.iconlist{width: 100%;position: absolute;bottom: 50px;left: 0;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;}
.iconlist li{display: block;width: 10px;height: 10px;border-radius: 50%;background-color: #FFFFFF;margin-right: 10px;}
.iconlist li:last-child{margin-right: 0;}
.iconlist li.active{background-color: #E9470A;}

.vueswiperwrap .fa{display: block;width: 50px;height: 50px;border-radius: 50%;background-color: #FFFFFF;text-align: center;line-height: 50px;font-size: 30px;color: #222222;box-shadow: 0px 0px 5px rgba(0,0,0,0.3);position: absolute;top: 50%;margin-top: -25px;}
.vueswiperwrap .to-left{left: 2%;}
.vueswiperwrap .to-right{right: 2%;}
/* 切换动画 */
/* 注：(v-enter/v-leave)vue提供的过渡动画类名 */
.leo-transition{-webkit-transition:all 1s;-webkit-transform:translateX(0);transition:all 1s;transform:translateX(0)}
.leo-enter{-webkit-transform:translateX(100%);transform:translateX(100%)}
.leo-leave{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.sky-transition{-webkit-transition:all 1s;-webkit-transform:translateX(0);transition:all 1s;transform:translateX(0)}
.sky-enter{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.sky-leave{-webkit-transform:translateX(100%);transform:translateX(100%)}

vue过渡&动画