简单实现轮播图⽚切换效果（基于vue）
思路:
⼀: 将vue的框架封装在function中，在界⾯刷新时调⽤，将要轮播的图⽚存放在data中，还有下⾯的列表也分别保存在data中的⼀个数组中，然后每隔⼀段时间进⾏⾃动切换的函数写在methods中，注意函数要调⽤的话，就要在⽣命周期函数中调⽤，不然的话就没有⽤，点击这⾥了解⽣命周期函数详细知识。
⼆: 认识到这⾥需要的是setinterval（）、⽽不是setimeout()函数：
etTimeout()和setInterval()经常被⽤来处理延时和定时任务。setTimeout() ⽅法⽤于在指定的毫秒数后调⽤函数或计算表达式,⽽setInterval()则可以在每隔指定的毫秒数循环调⽤函数或表达式，直到clearInterval把它清除。
setTimeout()只执⾏⼀次，⽽setInterval可以多次调⽤。
三: n的设置：⽅便我们进⾏操作，⽐如循环到第⼏个，下⾯的⼩⿊点也相应的变⾊，并且控制循环播放，当n等于数组的个数时，⾃动置0，从头开始。
四: html页⾯写好⼤的框架后，⽤v-for来控制，需要注意的是⽤v-for的时候⼀定要加上:key,
五: v-show的使⽤
六: 这⾥使⽤了字体库，所以要提前下载字体库。
直接上代码了
<body>
<!--页⾯容器-->
<div class="index-content" id="my">
<div class="banner">
<img  v-for="(v,i) in img " :key="i" :src="v" v-show="i==n"/>
<div class="banner-circle">
<ul>
<li  v-for="(v,i) in img " :key="i" :class="i==n ?'selected':''"></li>
</ul>
</div>
</div>
</div>
</body>
js
new Vue({
js实现轮播图最简代码el:"#my",
data:{
img:["img/banner1.jpg",
"img/banner2.jpg",
"img/banner3.jpg",
"img/banner4.jpg",
"img/banner5.jpg"],
n:2
},
methods:{
fun:function(){
//setInterval(函数体，时间)
setInterval(this.play,2000)
},
play:function(){
this.n++;
if(this.n == this.img.length){
this.n = 0;
}
}
},
mounted:function(){    //⽣命周期钩⼦函数挂载完成            this.fun()
}
})
}
css
*{
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
body {
font-size: 14px;
background: #fff;
overflow-y:scroll;
overflow-x:hidden;
}
html,body {
max-width:720px;
height:100%;
margin:0 auto;
}
/*index*/
.index-content .banner {
position: relative;
}
.index-content .banner .banner-circle {
position: absolute;
bottom: 5px;
left: 0;
right: 0;
color: #fff;
}
.index-content .banner .banner-circle li{
.index-content .banner .banner-circle li{
display:inline-block;
background: rgba(0,0,0,.3);
border-radius: 50%;
padding:5px;
margin:2px;
}
.index-content .banner .banner-circle ul {
text-align: center;
}
.index-content .banner .banner-circle .selected {
background: rgba(0,0,0,.8);
}
.
index-content .banner img {
width: 100%;
margin: 0;
padding: 0;
}
/*index-category*/
.index-content .index-category {
margin-top: 5%;
}
.index-content .index-category .category {
width: 50%;
float:left;
text-align:center;
}
.index-content .index-category .category .iconfont {
font-size: 40px;
display:inline-block;
padding: 10%;
border-radius: 50%;
color:#fff;
border: 3px solid #f9f9f9;
box-shadow: 0px 0px 6px rgba(0,0,0,.5);
}
.index-content .index-category .category .iconfont{
background: #92d85c;
}
.index-content .index-category .category:nth-child(2) .iconfont{    background: #f60;
}
.index-content .index-category .category:nth-child(4) .iconfont{    background: #f00;
}
.index-content .index-category .category label {
display: block;
padding: 10% 0;
color: #999;
}
/*index-category end*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。