轮播图实现
原理
- 使用
transform:translateX(offset);
实现切换 -
transition: transform 1s;
实现动态效果 -
transition-duration
开启或关闭动态效果。
图解
现有三张图片A、B和C
但为了实现C到A的无缝切换,需调整为
A到C的切换效果很好实现,重点在于C与A的切换:C以动画效果切换A后(索引3),停止动画效果(transition-duration:1s
),视窗移入A(索引0),再开启动画效果。
代码
这是为了方便,用到了Jquery和Vue
html
<div class="container" id="container">
<div class="carousel">
<div class="carousel-indicator">
</div>
<div class="carousel-inner">
<ul class="carousel-inner-group" ref="carouselInnerGroup">
<li v-for="img in imgs2" class="carousel-item">
<img :src="img" alt="" ref="imgItem">
</li>
</ul>
</div>
<div class="carousel-control">
</div>
</div>
</div>
css
.carousel-inner-group{
list-style-type: none;
margin:0;
padding:0;
display:flex;
width:100%;
height:100%;
transition: transform 1s;
}
.carousel-inner {
width:100%;
height:100%;
overflow-x:hidden;
}
.carousel {
width:100%;
}
.carousel-item >img{
width:100%;
height:100%;
object-fit: cover;
}
.carousel-item {
flex-basis: 100%;
flex-shrink: 0;
}
javascript
let vm=new Vue({
el:"#container",
data:{
imgs:["image/la.jpg","image/ny.jpg","image/chicago.jpg"],
active:0
},
computed:{
imgs2(){
//拷贝
let imgs2=Object.assign([],this.imgs);
//后面插入第一个元素
imgs2.push(imgs2[0]);
return imgs2;
}
},
watch:{
active(val){
let vm=this;
let length=this.$refs.imgItem[0].offsetWidth;
if(val!=0){
$(this.$refs.carouselInnerGroup).css("transform",`translateX(-${length*val}px)`);
}else{//特殊情况
//先播放动画
$(this.$refs.carouselInnerGroup).css("transform",`translateX(-${length*this.imgs.length}px)`);
//播放完后,调整为初始状态
setTimeout(function(){//延时1s,此时播放完毕
//先停止播放
$(vm.$refs.carouselInnerGroup).css("transition-duration","0s");
//调整到
$(vm.$refs.carouselInnerGroup).css("transform",'translateX(0px)');
//恢复
setTimeout(function(){//为了生效,延迟0.5s
$(vm.$refs.carouselInnerGroup).css("transition-duration","1s");
},500);
},1000);
}
}
},
methods:{
/**
* active增加
*/
incActive(){
if(++this.active>=this.imgs.length){
this.active=0;
}
}
},
/**
* 设置定时器
*/
mounted(){
let vm=this;
setInterval(function(){
vm.incActive();
},3000);
}
})