vue实现轮播图
<template>
<div id="app">
<div class="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')">
<!-- 图片 -->
<div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}">
<img :src="item.imgUrl" v-for="(item,index) in imgList" :key="index" />
<!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 -->
<img :src="imgList[0].imgUrl" alt="">
</div>
<!-- 左箭头按钮 -->
<div class="leftBtn" @click="throttle(PrevFun)">←</div>
<!-- 右箭头按钮 -->
<div class="rightBtn" @click="throttle(NextFun)">→</div>
<!-- 下方指示点容器 -->
<div class="instBox">
<div @click="instFun(index)" v-for="(item,index) in imgList.length" :key="index"
:class="['inst',index==imgShow?'instActv':'']">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
{imgUrl: "https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg"},
{imgUrl: "https://img12.360buyimg.com/pop/s590x470_jfs/t1/204028/36/25480/101429/62f507a7Ec62b0cd3/db5984ae24ce0212.jpg"},
{imgUrl: "https://imgcps.jd.com/ling4/100022552927/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e6/075268d0/cr/s/q.jpg"},
{imgUrl: "https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e3/d7b3695b/cr/s/q.jpg"},
{imgUrl: "https://img30.360buyimg.com/pop/s590x470_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg"},
],
leftVal:0,
flag:true,
start:null,
imgWidth:500,
ition:0.8,
imgShow:0,
};
},
mounted() {
this.奥力给()
},
methods: {
MouseFun(type){
type=='移入'?clearTimeout(this.start):this.奥力给()
},
奥力给(){
this.start = setInterval(()=>{
this.NextFun()
},1500)
},
throttle(fun) {
if (this.flag) {
this.flag = false;
fun();
setTimeout(() => {
this.flag = true;
}, 1200);
}
},
PrevFun(){
if(this.leftVal==0){
this.ition=0
this.imgShow=this.imgList.length-1
this.leftVal=(this.imgList.length)*this.imgWidth
setTimeout(()=>{
this.ition=0.8
this.leftVal -= this.imgWidth
},this.ition*1000)
}else{
this.ition=0.8
this.leftVal -= this.imgWidth
this.imgShow--
}
},
NextFun(){
if(this.leftVal==(this.imgList.length-1)*this.imgWidth){
this.ition=0.8
this.leftVal+=this.imgWidth
this.imgShow=0
setTimeout(()=>{
this.ition=0
this.leftVal=0
},this.ition*1000)
}else{
this.ition=0.8
this.leftVal+=this.imgWidth
this.imgShow++
}
},
instFun(index){
this.ition=0.8
this.leftVal=index*this.imgWidth
this.imgShow=index
},
}
};
</script>
<style>
.SwiperBox {
position: relative;
width: 500px;
height: 300px;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
}
.imgBox{
position: absolute;
top: 0px;
left: 0px;
min-width: 500px;
height: 300px;
display: flex;
justify-content: flex-start;
}
.imgBox img {
flex-shrink: 0;
width: 500px;
height: 300px;
}
.leftBtn,
.rightBtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(109, 109, 109, 0.445);
color: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
.leftBtn {
left: 10px;
}
.rightBtn {
right: 10px;
}
.instBox{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
display: flex;
}
.inst{
width: 10px;
height: 10px;
border: 1px solid #ccc;
margin-right: 8px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}
.inst:last-child{
margin-right: 0px;
}
.instActv{
border: 1px solid #ff0000;
background: #ff0000;
}
#app{
width: 100%;
padding: 120px;
display: flex;
justify-content: center;
}
</style>