odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
clay
2021-12-29 15:59:18 +08:00
parent b85d353e84
commit 3f23c616ea
10 changed files with 985 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
src/views/index/components/slideshow_card.vue Normal file
View File

@@ -0,0 +1,282 @@
<template>
<div class="banner-card">
<ul class="ul">
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
</ul>
<div class="left-btn">
<span>
<button class="el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i></button>
</span>
</div>
<div class="right-btn">
<span>
<button class="el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i></button>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
default: {
//默认值
classArray: ["one", "two", "three", "four", "five", "six"],
leftSlider: true,
},
bannerWrap: null,
time: null,
lisArray: null, //卡片的集合
classlist: null,
leftBtn: null,
rightBtn: null,
};
},
methods: {
constructor() {
this.bannerWrap = document.getElementsByClassName("banner-card")[0];
let lis = this.bannerWrap.getElementsByTagName("li");
// 将类数组转化为数组
this.lisArray = Array.from(lis);
this.classlist = this.default.classArray;
//获取左右按钮
this.leftBtn = document.getElementsByClassName("left-btn")[0];
this.rightBtn = document.getElementsByClassName("right-btn")[0];
this.move(this.classlist);
this.timer();
this.listenMouseEvent();
this.listenMouseClickBtnEvent();
},
//移动
move(list) {
this.lisArray.forEach((value, index) => {
value.setAttribute("class", list[index]); //给每一个li添加对应的类名
});
},
// 向左运动
leftMove() {
let popValue = this.classlist.pop(); //删除并返回数组的最后一个
this.classlist.unshift(popValue); //把刚才删除的最后一个添加到数组开头
this.move(this.classlist); //调用移动方法，每一个li会根据新数组的位置进行移动，从而实现轮播的效果
},
// 向右运动
rightMove() {
let shiftValue = this.classlist.shift(); //删除并返回数组的第一个
this.classlist.push(shiftValue); //把刚才删除的第一个push到数组末尾
this.move(this.classlist);
},
// 定时器自动切换
timer() {
this.time = setInterval(this.leftMove.bind(this), 1000);
},
// 鼠标移入移出事件
listenMouseEvent() {
this.bannerWrap.addEventListener("mouseover", () => {
clearInterval(this.time);
this.leftBtn.style.cssText = `left: 6rem; opacity: 1`;
this.rightBtn.style.cssText = `right: 6rem; opacity: 1`;
});
this.bannerWrap.addEventListener("mouseout", () => {
this.timer();
this.leftBtn.style.cssText = `left: 2rem; opacity: 0`;
this.rightBtn.style.cssText = `right: 2rem; opacity: 0`;
});
},
// 点击左右按钮事件
listenMouseClickBtnEvent() {
this.leftBtn.addEventListener("click", () => {
this.leftMove();
});
this.rightBtn.addEventListener("click", () => {
this.rightMove();
});
},
},
mounted() {
this.constructor();
},
};
</script>
<style scoped lang="scss">
.banner-card {
width: 100%;
height: 50rem;
//background: #f5f5f5;
position: relative;
ul {
width: 102rem;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
li {
border-radius: 2rem;
width: 40rem;
height: 40rem;
position: absolute;
top: 2.5rem;
list-style-type: none;
transition: 0.3s;
cursor: pointer;
border: 1px solid #DA2D2D;
background-color: #fff;
.card_img {
width: 40rem;
height: 30rem;
img {
border-radius:2rem 2rem 0 0;
display: inline-block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card_title{
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1C;
text-align: left;
width: 36rem;
margin: 2rem auto;
}
}
}
.one {
z-index: 98;
left: -6rem;
transform: scale(0.8);
}
.two {
z-index: 99;
left: 14rem;
transform: scale(0.9);
}
.three {
left: 30rem;
z-index: 100;
transform: scale(1);
}
.four {
z-index: 99;
left: 48rem;
transform: scale(0.9);
}
.five {
left: 66rem;
z-index: 98;
transform: scale(0.8);
}
.six {
left: 74rem;
z-index: 96;
transform: scale(0.7);
}
.banner-card .left-btn ,.right-btn {
transition: 0.3s;
position: absolute;
top: 20rem;
cursor: pointer;
opacity: 0;
}
.banner-card div span {
display: inline-block;
font-size: 2.5rem;
}
.left-btn {
left: 2rem;
}
.right-btn {
right: 10rem;
}
</style>