專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-09-02 10:41:32 來源：動力節點 瀏覽1267次
1.將vue的框架封裝在function中，在界面刷新時調用，將要輪播的圖片存放在data中，還有下面的列表也分別保存在data中的一個數組中，然后每隔一段時間進行自動切換的函數寫在methods中，注意函數要調用的話，就要在生命周期函數中調用，不然的話就沒有用。
2.認識到這里需要的是setinterval()、而不是setimeout()函數：
etTimeout()和setInterval()經常被用來處理延時和定時任務。setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式,而setInterval()則可以在每隔指定的毫秒數循環調用函數或表達式，直到clearInterval把它清除。
setTimeout()只執行一次，而setInterval可以多次調用。
3.n的設置：方便我們進行操作，比如循環到第幾個，下面的小黑點也相應的變色，并且控制循環播放，當n等于數組的個數時，自動置0，從頭開始。
4.html頁面寫好大的框架后，用v-for來控制，需要注意的是用v-for的時候一定要加上:key,
5.v-show的使用
6.這里使用了字體庫，所以要提前下載字體庫。
html代碼：
<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 class="index-category">
<div class="category" v-for="(list,index) in lists" :key="index">
<i class="iconfont" :class="list.icon" :style="{background:list.color}"></i>
<label>{{list.title}}</label>
</div>
</div>
</body>
js代碼：
window.onload = function(){
new Vue({
el:"#my",
data:{
lists:[
{title:'在線咨詢',icon:'icon-shenghuo',color:'#f60'},
{title:'產品介紹',icon:'icon-jiaoyu',color:'#f95730'},
{title:'活動動態',icon:'icon-11',color:'#49dacf'},
{title:'在線咨詢1',icon:'icon-jiazheng',color:'#f60'},
{title:'在線咨詢2',icon:'icon-jiajujiafang',color:'#908cfd'},
{title:'在線咨詢3',icon:'icon-licai',color:'#92d85c'}
],
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{
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*/
樣式展示：
上面輪播的圖片2000毫秒更換一次。
以上就是動力節點小編介紹的"Vue實現簡單輪播圖"，希望對大家有幫助，想了解更多可查看編程入門教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號