效果图:
image
为什么不采用element-ui中的跑马灯？
**element-ui中的跑马灯组件存在局限性：在一屏中只能显示三张图片。**
采用swiper步骤以及代码：
1.安装
npm install swiper@5.x vue-awesome-swiper --save
注意：swiper@6.x只与vue3兼容
2.组件内使用
<div class="bottom">
<swiper :options="swiperOption">
// pre按钮
<div class="swiper-button-prev" slot="button-prev"></div>
<swiper-slide v-for="(slide, key) in swiperList" :key="key">
<div>
<div class="item_container">
<img :src="slide.apparatusLogo" alt="" class="apparatus_logo">
<span class="apparatus_name">{{ slide.apparatusName }}</span>
</div>
<div class="apparatus_img">
<img :src="slide.apparatusImg" >
</div>
</div>
</swiper-slide>
// next按钮
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperList: [
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪1",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪2",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪3",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪4",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪5",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪6",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
{
"apparatusLogo": require("@/assets/images/meteorologicalObservation/气溶胶.png"),
"apparatusName": "激光云高仪7",
"apparatusImg": require("@/assets/images/meteorologicalObservation/激光云高仪bgc.png"),
},
],
//轮播图配置项
swiperOption: {
//开启这个参数来计算每个slide的progress，Swiper的progress无需设置即开启
watchSlidesProgress: true,
//设置slider容器能够同时显示的slides数量
slidesPerView: "auto",
//active图片居中
centeredSlides: true,
//开启loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
loop: true,
//在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
loopedSlides: 5,
//轮播设置
autoplay: {
//点击后仍能自动开始轮播
disableOnInteraction: false,
},
//pre, next按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。
pagination: {
el: ".swiper-pagination",
//clickable :true,
},
//不允许拖动
allowTouchMove: false,
on: {
//回调函数，当Swiper的progress被改变时执行。接受swiper实例和此Swiper的progress作为参数（返回值范围一般在0-1）。
progress: function (progress) {
for (let i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
let scale = (Math.abs(1 - Math.abs(slideProgress) / 5)).toFixed(1);
if(scale < 1) {
scale = 0.8
}
slide.transform(
"scale(" + scale + ")"
);
slide.css("opacity", 1);
if (Math.abs(slideProgress) > 3) {
slide.css("opacity", 0);
}
}
},
//回调函数，每当设置Swiper开始过渡动画时执行。transtion获取到的是Swiper的speed值
setTransition: function (transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
slide.transition(transition);
}
},
},
// Some Swiper option/callback...
},
};
},
}
</script>
<style>
.bottom {
height: 30%;
width: 100%;
// box-sizing: border-box;
padding-top: 1%;
overflow: hidden;
margin: 0 auto;
background: linear-gradient(
270deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 16%,
#ffffff 50%,
rgba(255, 255, 255, 0.6) 84%,
rgba(255, 255, 255, 0) 100%
);
.item_container {
width: 100%;
text-align: center;
.apparatus_logo {
font-size: 16px;
margin-right: 10px;
vertical-align: text-bottom;
}
.apparatus_name {
color: #333;
font-size: 16px;
font-family: MicrosoftYaHei;
line-height: 19px;
}
}
.apparatus_img {
padding: 7% 0.5%;
background: url("../../assets/images/meteorologicalObservation/默认-bg.png") no-repeat;
background-size: 100% 100%;
// background-size: contain;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
img {
width: 85%;
height: 80%;
}
}
}
.bottom:hover .swiper-button-prev{
display: block;
}
.bottom:hover .swiper-button-next{
display: block;
}
.swiper-slide {
width: 19.1%;
}
.swiper-button-prev {
display: none;
margin-right: 1%;
}
.swiper-button-next {
display: none;
margin-left: 1%;
}
</style>
