记录下自己写仿网易云音乐手写的轮播图,效果如图
简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行。定义一个数组,放轮播图片的id名,删除数组最后一张图片class名放到数组第一个位置,获取轮播图对应dom,for循环遍历,重新设置id名,不停循环,图片就会不断从右向左浮动显示。从左向右同理删除数组第一张图片id名放到数组最后一个位置。
代码部分:
<template>
<div class="box">
<ul class="img_list">
<li
v-for="(val, index) in banners"
:key="index"
:id="'last' + (index + 1)"
>
<img class="img" :src="val.imageUrl" alt="" />
</li>
<div class="span">
<span
v-for="(val, index) in banners"
:key="index"
@mouseover="mouse(index)"
@mouseleave="leave()"
></span>
</div>
</ul>
</div>
</template>
<script>
let li = [];
let time;
let index = 0;
export default {
data() {
return {
elenent: [],
banners: [],
li1: [],
};
},
mounted() {
this.initImg();
},
beforeDestroy() {
clearInterval(time);
},
methods: {
//初始化图片
initImg() {
new Promise((resolve, reject) => {
//请求图片
this.getapi.homeImg().then((res) => {
//console.log(res.banners, "1234img");
this.banners = res.banners;
//给定义数组赋值
for (var i = 0; i < res.banners.length; i++) {
li[i] = "last" + (i + 1);
}
// for (var i = 0; i < this.banners.length; i++) {
// this.li1[i] = li
// li.unshift(li.pop());
// }
let arr = [];
for (let i = 0; i < this.banners.length; i++) {
this.li1.push(JSON.parse(JSON.stringify(li)));
li.unshift(li.pop());
}
//console.log(this.li1, "zxc123");
resolve();
});
}).then(() => {
//开启图片轮播
//console.log(li,456)
//this.li1 = JSON.parse(JSON.stringify(arr))
console.log(this.li1, "zxc");
time = setInterval(this.right1, 3000);
});
},
right1() {
let libox = document.getElementsByClassName("img_list")[0].children;
let span = document.getElementsByClassName("span")[0].children;
//删除最后一张图片放到第一张
//console.log(li,456)
li.unshift(li.pop());
for (let i = 0; i < span.length; i++) {
span[i].style.background = "#e6e6e6";
}
index++;
if (index > span.length - 1) {
index = 0;
}
span[index].style.background = "#ec4141";
for (let i = 0; i < li.length; i++) {
libox[i].id = li[i];
}
},
right() {
let libox = document.getElementsByClassName("img_list")[0].children;
let span = document.getElementsByClassName("span")[0].children;
//删除最后一张图片放到第一张
//li.unshift(li.pop());
//console.log(li);
//console.log(index,'zxc')
for (let i = 0; i < span.length; i++) {
span[i].style.background = "#e6e6e6";
}
if (index > span.length - 1) {
index = 0;
}
span[index].style.background = "#ec4141";
//index++;
for (let i = 0; i < li.length; i++) {
libox[i].id = li[i];
}
},
left() {
let libox = document.getElementsByClassName("img_list")[0].children;
let span = document.getElementsByClassName("span")[0].children;
//删除最后一张图片放到第一张
//li.push(li.shift());
//console.log(li);
//console.log(index,'zxc')
for (let i = 0; i < span.length; i++) {
span[i].style.background = "#e6e6e6";
}
if (index < 0) {
index = 0;
}
span[index].style.background = "#ec4141";
//index--
},
mouse(e) {
let libox = document.getElementsByClassName("img_list")[0].children;
clearInterval(time);
li = JSON.parse(JSON.stringify(this.li1[e]));
//console.log(li,789)
if (e > index) {
index = e;
for (let i = 0; i < li.length; i++) {
libox[i].id = li[i];
}
this.right();
num = e;
}
if (e < index) {
index = e;
for (let i = 0; i < li.length; i++) {
libox[i].id = li[i];
}
this.left();
num = e;
}
//console.log(this.li1[e], index);
},
leave() {
clearInterval(time);
//index = num
time = setInterval(this.right1, 3000);
},
},
};
</script>
<style scoped>
.box {
width: 95%;
height: 180px;
margin-left: 15px;
margin-top: 20px;
position: relative;
}
.img_list {
width: 100%;
height: 150px;
}
.img_list li {
float: left;
position: absolute;
left: 0;
border-radius: 10px;
transition: all 0.5s;
}
.img_list li img {
width: 400px;
height: 150px;
border-radius: 10px;
}
#last1 {
left: 0;
z-index: 1;
}
#last2 {
left: 290px;
transform: scale(1.25);
z-index: 99;
}
#last3 {
left: 645px;
z-index: 1;
}
#but {
position: absolute;
z-index: 999;
bottom: 200px;
}
.span {
width: auto;
height: 20px;
position: absolute;
bottom: -5px;
z-index: 99;
left: 46%;
transform: translateX(-50%);
}
.span span {
width: 30px;
height: 5px;
text-align: center;
display: inline-block;
background-color: #e6e6e6;
margin-left: 20px;
border-radius: 3px;
}
.span span:nth-child(1) {
margin-left: 0px;
background-color: #ec4141;
}
</style>