首先先看样式
这个轮播图是根据数据库里 的图片数量进行动态变化的
只有一张图不轮播
大于1张图才会动起来
html
< div class = " banner" >
< ul class = " con" : style =" classobj " >
< li v-for = " (item, index ) in banList" :key = " index" >
< a :href = " item.serviceContent" >
< img :src = " item.imgUrl" alt = " " >
</ a>
</ li>
</ ul>
< ul class = " btn" >
< li v-for = " (item, index) in banList" :key = " index" @click = " now(index)" > </ li>
</ ul>
< div class = " rb" @click = " rb" > ></ div>
< div class = " lb" @click = " lb" > <</ div>
</ div>
javascript
export default {
data ( ) {
return {
banList: [ ] ,
num: 0 ,
}
} ,
methods: {
async getBanner ( ) {
let res = await axios. getTest ( 'xxx' )
if ( res. code == 0 ) {
this . banList = res. data. resultList
if ( this . banList. length > 1 ) {
this . startMove ( )
}
}
} ,
now ( index) {
this . num= index;
console. log ( this . num)
} ,
rb ( ) {
if ( this . num == this . banList. length - 1 ) {
this . num= 0 ;
} else {
this . num++ ;
}
} ,
lb ( ) {
if ( this . num == 0 ) {
this . num = this . banList. length - 1 ;
} else {
this . num -- ;
}
} ,
startMove ( ) {
setInterval ( ( ) => {
this . rb ( )
} , 3000 )
}
} ,
created ( ) {
this . getBanner ( )
} ,
computed: {
classobj: function ( ) {
return { marginLeft: this . num * - 7.5 + 'rem' , width: this . banList. length * 7.5 + 'rem' }
}
}
}
< / script>
css
ul , li {
list-style : none;
}
.banner {
width : 7.5rem;
height : 2.85rem;
margin : 0 auto;
position : relative;
overflow : hidden;
}
.con {
width : 37.5rem;
height : 2.85rem;
transition : 1s all;
}
.con li {
width : 7.5rem;
height : 2.85rem;
float : left;
overflow : hidden;
padding : 0.2rem 0.25rem;
line-height : 2.62rem;
}
.btn {
position : absolute;
bottom : 0.3rem;
left : 50%;
transform : translate ( -50%, 0) ;
}
.btn li {
width : 0.2rem;
height : 0.2rem;
border-radius : 50%;
background : #fff;
float : left;
margin : 0.1rem;
text-align : center;
}
.rb,.lb {
display : block; // 不需要左右箭头可以设为 none
position : absolute;
font-size : 30px;
color : orange;
top : 50%;
transform : translate ( 0 , -50%) ;
margin-top : -20px;
}
.rb {
right : 0;
}
一个简单的动态轮播图, 各位有没有学会呢! 觉得有用就点个赞吧