话不多说,直接上代码吧!!!
<template>
<div class="banner">
<ul class="banner-ul">
<li :class="item" @click='changeImg(item)' v-for='(item,idx) in pArr'>
<img :src="imgArr[idx]" alt="">
</li>
</ul>
<ul class="dot-ul">
<li class="dot" @click='changeImg(imgArr[idx],idx)' :class="{cur:imgArr[index]==imgArr[idx]}" v-for='(item,idx) in pArr'></li>
</ul>
</div>
</template>
<script>
export default {
name: 'banner',
props:['imgArr'],
data (){
return {
pArr:["p1","p2","p3"],
index:1
}
},
mounted:function() {
const that = this
setInterval(()=>{
that.nextImg();
},3000);
},
methods:{
previmg:function(){
this.pArr.unshift(this.pArr[2]);
this.pArr.pop();
this.index--;
this.index=this.index<0?this.pArr.length-1:this.index;
},
nextImg:function () {
this.pArr.push(this.pArr[0]);
this.pArr.shift();
this.index++;
this.index=this.index>this.pArr.length-1?0:this.index;
},
changeImg:function (item,idx) {
if(arguments[1]){
if(idx-this.index==1){
this.nextImg();
}else if(idx-this.index==2){
this.nextImg();
this.nextImg();
}else if(idx-this.index==-1){
this.previmg();
}else if(idx-this.index==-2){
this.previmg();
this.previmg();
}
this.index = idx;
}else{
if(item=='p3'){
this.previmg();
}else if(item=='p1'){
this.nextImg();
}
}
}
}
}
</script>
<style>
.banner{
position: relative;
overflow: hidden;
width: 610px;
height: 540px;
}
.banner .banner-ul li{
position: absolute;
cursor: pointer;
transition: all .3s ease-out;
width: 280px;
height: 498px;
}
.p1{
transform-origin:0 50%;
opacity: 0.7;
z-index: 2;
transform:translate3d(0px,0,0) scale(0.9);
}
.p2{
z-index: 3;
opacity: 1;
transform:translate3d(165px,0,0) scale(1);
}
.p3{
transform-origin:100% 50%;
opacity: 0.7;
z-index: 2;
transform:translate3d(330px,0,0) scale(0.9);
}
.banner li img{
width: 100%;
height: 100%;
}
.dot-ul{
width:100%;
height: 20px;
position: absolute;
bottom: 0;
text-align: center;
line-height: 20px;
}
.dot-ul li{
width: 10px;
height: 10px;
border-radius: 10px;
opacity: 0.5;
background: #232323;
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.dot-ul li.cur{
background: #232323;
opacity: 1;
}
@media (min-width: 1440px) {
.banner{
position: relative;
width: 670px;
height: 570px;
overflow: hidden;
}
.banner .banner-ul li{
width: 300px;
height: 534px;
}
.p1{
transform:translate3d(0px,0,0) scale(0.9);
}
.p2{
transform:translate3d(170px,0,0) scale(1);
}
.p3{
transform:translate3d(370px,0,0) scale(0.9);
}
}
</style>
本代码使用的是vue项目代码规范,其中包括切换下一张、上一张以及轮播图下面小点的点击效果及切换功能。
嘻嘻,就到这里吧撒拉嘿呦~