<!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>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.container{
display: flex;
position: relative;
justify-content: center;
margin: 100px auto;
}
.container img{
width: 600px;
}
.indexs{
display: flex;
position: absolute;
bottom: 10px;
}
.indexs li{
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
margin: 0 10px;
}
.active{
background: rgba(211, 16, 16, 0.6) !important;
}
</style>
<body>
<div id="app">
<div class="container">
<!-- show:当缩影值等于count时显示 for:循环a标签和img标签 -->
<a href="" v-show="i===count" v-for="(item,i) in arr" :key="item">
<img :src="item" alt="">
</a>
<ul class="indexs">
<!-- 循环li标签 绑定class，当i==count时候，添加active类 -->
<li v-for="(item,i) in arr" :class="{active:i===count}"></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
count:0,
arr:[
'http://p1.music.126.net/qyZuvNhvjl4E9h-s7brzhg==/109951164602919705.jpg?imageView&quality=89',
'http://p1.music.126.net/2Om_36vz5DjKYW0K_oJ9OA==/109951164603219385.jpg?imageView&quality=89',
'http://p1.music.126.net/gy8qnzUzEziRQdkwE0XCRQ==/109951164603206938.jpg?imageView&quality=89',
'http://p1.music.126.net/DSurnNU-gDyjHOLPhnymeg==/109951164602907451.jpg?imageView&quality=89'
]
},
mounted(){
setInterval((e) => {
++this.count
if(this.count>=this.arr.length) this.count=0;
}, 1000);
}
})
</script>
</body>
</html>
————————————写的不好，仅供参考
网友评论