<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="div">
<div class="slide">
<div class="slideshow">
<transition-group tag="ul" name="image">
<li v-for="(item, index) in imgArray" v-show="index==mark" :key="index" class="newnew">
<div :style="{background:item.backgroundI}">{{item.name}}</div>
</li>
</transition-group>
</div>
<div class="bar">
<span v-for="(item, index) in imgArray" :class="{'active':index===mark}" :key="index" @click="stop(index)"></span>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#div',
data() {
return {
mark: 0,
imgArray: [{
backgroundI:"red",
name:1
},
{
backgroundI:"yellow",
name:2
},{
backgroundI:"green",
name:3
},{
backgroundI:"blue",
name:4
}
]
}
},
methods:{
loadImg(){
this.mark++;
if(this.mark==this.imgArray.length){
this.mark=0;
}
},
time(){
var self=this;
this.timeImg=setInterval(()=>{
self.loadImg()
},4000)
},
stop(index){
this.mark=index;
clearInterval(this.timeImg,200);
this.time()
}
},
mounted() {
this.time()
},
})
</script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slide {
width: 1024px;
height: 320px;
margin: 0 auto;
margin-top: 50px;
overflow: hidden;
position: relative;
}
.slideshow {
width: 1024px;
height: 320px;
}
li {
position: absolute;
}
.newnew div {
width: 1024px;
height: 320px;
}
.bar {
position: absolute;
width: 100%;
bottom: 10px;
margin: 0 auto;
z-index: 10;
text-align: center;
}
.bar span {
width: 20px;
height: 5px;
border: 1px solid;
background: white;
display: inline-block;
margin-right: 10px;
}
.active {
background: red !important;
}
.image-enter-active {
transform: translateX(0);
transition: all 1.5s ease;
}
.image-leave-active {
transform: translateX(-100%);
transition: all 1.5s ease;
}
.image-enter {
transform: translateX(100%);
}
.image-leave {
transform: translateX(0);
}
</style>
</body>
</html>
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
