<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#app {
width: 550px;
height: 240px;
border: 1px solid darkgoldenrod;
margin: 200px auto;
}
img {
width: 550px;
height: 240px;
}
.index {
display: flex;
position: absolute;
left: 38%;
top: 90%;
}
.index li {
width: 12px;
height: 2px;
margin: 0 10px;
background-color: #fff;
/* border-radius: 50%; */
}
.index li.active {
background: red;
}
.container {
width: 550px;
position: relative;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<img :src="img" alt="" v-show="i===activeIndex" v-for="(img,i) in list">
<ul class="index">
<li @mouseenter="hover(i)" :class='{active:i===activeIndex}' v-for="(img,i) in list"></li>
</ul>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
timer:null,
activeIndex: 0,
list: [
'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg',
'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
'http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg',
'https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png'
]
}
},
mounted() {
//DOM初始化完成
// setInterval(() => {
// this.activeIndex++
// if (this.activeIndex === this.list.length) {
// this.activeIndex = 0
// }
// }, 2000)
this.run()
},
methods:{
run() {
this.timer = setInterval(() => {
this.activeIndex++
if (this.activeIndex === this.list.length) {
this.activeIndex = 0
}
}, 2000)
},
hover(i) {
clearInterval(this.timer)
this.activeIndex = i
this.run()
}
}
})
</script>
</body>
</html>
