<!--
|
/**
|
* @description 图片走马灯组件
|
* @author huangpan
|
*/
|
-->
|
<template>
|
<div class="trottingHorseLampStyle">
|
<swiper ref="mySwiper" :options="swiperOptions" v-if="infoData.picData.length">
|
<swiper-slide v-for="(item, index) in infoData.picData" :key="index"
|
:style="{width:infoData.width,height:infoData.height}">
|
<img :src="item.img" alt="" class="imgs-style"
|
:style="{width:infoData.width,height:infoData.height}" />
|
</swiper-slide>
|
<div class="swiper-pagination" slot="pagination"></div>
|
</swiper>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "PicTrottingHorseLamp",
|
data() {
|
return {
|
swiperOptions: {//轮播图参数配置，参数同swiper官方api参数
|
slidesPerView: "auto",//wrapper中显示的图片数量
|
spaceBetween: 16,//图片之间间隔
|
loop: true,//循环播放
|
speed: 1200,//图片切换速度
|
autoplay: {
|
delay: 0, //自动切换的时间间隔
|
disableOnInteraction: false,
|
pauseOnMouseEnter: true, //鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
}
|
},
|
infoData: {
|
width: '230px',
|
height: '250px',
|
picData: [
|
{
|
text: "图一",
|
img: require("../../assets/images/p1.png"),
|
},
|
{
|
text: "图二",
|
img: require("../../assets/images/p2.png"),
|
},
|
{
|
text: "图三",
|
img: require("../../assets/images/p3.png"),
|
}
|
],
|
}
|
}
|
},
|
computed: {
|
swiper() {
|
return this.$refs.mySwiper.$swiper
|
}
|
},
|
}
|
</script>
|
|
<style lang="less">
|
.trottingHorseLampStyle {
|
.swiper-container .swiper-wrapper {
|
-webkit-transition-timing-function: linear !important; /*之前是ease-out*/
|
-moz-transition-timing-function: linear !important;
|
-ms-transition-timing-function: linear !important;
|
-o-transition-timing-function: linear !important;
|
transition-timing-function: linear !important;
|
}
|
}
|
</style>
|
