vue的html轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.app{
width:1200px;
margin:50px auto;
overflow: hidden;
position: relative;
}
ul{
width:6000px;
}
li{
position: absolute;
display:inline-block;
}
.auto-img{
display:block;
width:100%;
}
//进入动画的第一帧,也就是开始状态
.fade-enter{
transform: translateX(1200px);
}
//进入动画和离开动画的整个过程状态
.fade-enter-active,.fade-leave-active{
transition : all 0.5s linear;
}
进入动画的最后一帧
.fade-enter-to{
transform: translateX(0);
}
离开动画的第一帧,也就是结束状态
.fade-leave{
transform: translateX(0);
}
离开动画的最后一帧
.fade-leave-to{
transform: translateX(-1200px);
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="app">
<transition-group name="fade" tag="ul">
//循环加显示与隐藏判断
<li v-for="(img,i) in imgs" :key="i" v-show="i === index">
<img :src="img" >
</li>
</transition-group>
</div>
<script>
new Vue({
el:".app",
data:{
imgs:[
"./images/banner01.jpg",
"./images/banner02.jpg",
"./images/banner03.jpg",
"./images/banner04.jpg",
],
index:0,
},
//元素渲染完成再操作,使用定时器使下标轮加
mounted(){
this.timer=setInterval(()=>{
this.index++;
if(this.index > this.imgs.length-1){
this.index = 0;
}
},1000)
},
//在销毁前清除定时器
beforeDestroy(){
clearInterval(this.timer)
}
})
</script>
</body>
</html>