vue版轮播图
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;vue版轮播图&lt;/title&gt;
&lt;script src=&quot;./vue.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
height: 100vh;
width: 100%;
align-items: center;
background-color:antiquewhite;
}
#app {
height: 400px;
width: 650px;
position: relative;
}
#app&gt;img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: 2.5s;
}
ul {
display: flex;
position: absolute;
bottom: 10px;
right: 10px;
}
li{
list-style: none;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: rgb(152, 29, 29);
border: 2px soid #827f7f;
margin-left: 10px;
cursor: pointer;
}
li:hover {
border-color: rgb(152, 29, 29);
background-color: #827f7f;
}
#app&gt;.selected {
opacity: 1;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;app&quot;&gt;
&lt;img v-for=&quot;(item,index) in src&quot; :src=&quot; './imgs/'+item &quot; :class=&quot;{selected : i===index}&quot;/&gt;
&lt;ul&gt;
&lt;li v-for=&quot;(item,index) in src&quot; @click=&quot;i=index&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;script&gt;
new Vue({
data(){
return {
src:['1.jpg','2.avif','3.jpg','4.jpg','5.jpg','6.jpg'],
i:0,
}
},
methods: {
fun(){
this.i=(this.i+1)%6
}
},
mounted(){
setInterval(this.fun,5000)
}
}).$mount('#app')
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9421f133824dcb9c8cb9f41ef555c220&amp;file=file.png" alt="" /></p>