实现功能
- 自动轮播(用了生命周期的mounted函数)
- 点击轮播点到相应图片
- 左右点击跳转
- 鼠标移入轮播停止,移除轮播继续
css样式
* {
margin: 0;
padding: 0;
list-style: none;
}
.con {
width: 800px;
height: 300px;
margin: auto;
background: darkcyan;
position: relative;
}
.left {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.839);
position: absolute;
left: 0;
top: 135px;
text-align: center;
line-height: 30px;
margin-left: 10px;
cursor: pointer;
}
.right {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.839);
position: absolute;
right: 0;
top: 135px;
text-align: center;
line-height: 30px;
margin-right: 10px;
cursor: pointer;
}
ul {
align-self: flex-end;
position: absolute;
right: 20px;
bottom: 10px;
}
li {
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
float: left;
margin: 0 5px;
}
.active {
background: rgb(132, 132, 132);
}
.lunimg {
width: 800px;
height: 300px;
position: absolute;
left: 0;
top: 0;
transition: all 0.8s;
}
HTML
<div class="con">
<div @mouseenter="stoptime" @mouseleave="starttime">
<img class="lunimg" v-for="item in images" :src="item.url" v-show="item.id==show">
</div>
<ul>
<li v-for="item in images" :class="{active:item.id==show}" @click="show=item.id"></li>
</ul>
<div class="left" @click="showdes">👈</div>
<div class="right" @click="showadd">👉</div>
</div>
<script src="./vue.js"></script>
<script>
var time
let vm = new Vue({
el: '.con',
data: {
images: [
{ id: 1, url: './lb1.webp' },
{ id: 2, url: './lb2.webp' },
{ id: 3, url: './lb3.webp' },
{ id: 4, url: './lb4.webp' },
{ id: 5, url: './lb5.jpg' },
],
show: 1
},
methods: {
showadd() {
this.show++
if (this.show > this.images.length) {
this.show = 1
}
},
showdes() {
this.show--
if (this.show <= 0) {
this.show = this.images.length
}
},
stoptime() {
clearInterval(window.time)
},
starttime() {
window.time = setInterval(function () {
vm.show++
if (vm.show > vm.images.length) {
vm.show = 1
}
}, 2000)
}
},
mounted() {
window.time = setInterval(function () {
vm.show++
if (vm.show > vm.images.length) {
vm.show = 1
}
}, 2000)
}
})
</script>