loopimg

基于Vue,可横滑的无缝轮播图;

引入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div class="loop-wrap">
<loop-img :imgs="imgs" :duration="0.5" :swipeable="true" :gap-time="4"/>
</div>
</template>
<script>
import loopImg from '../../appassets/components/LoopImg';
export default {
data() {
return {
imgs: [
{
imgSrc: '/src/assets/img/bg1/bg1.jpg',
link: 'https://tall-ui.github.io'
},
'/src/assets/img/bg1/bg2.jpg',
'/src/assets/img/bg1/bg3.jpg',
'/src/assets/img/bg1/bg4.jpg',
]
};
},
component: {
loopImg
}
};
</script>

例子

通过属性imgs向组件传递一个存放图片地址的数组,如果点击图片可以跳转的,每一项为一个对象,包含两个属性,imgSrclink,分别存放图片地址,和跳转链接;

loop

API

参数 说明 类型 可选值 默认值
imgs 图片地址集合 Array [‘/bg1/bg2.jpg’] []
imgs[i] 图片地址或图片信息相关 String/Object - -
imgs[i].imgSrc 图片地址 String - -
imgs[i].link 跳转落地链接 String - -
duration 动画过渡时间 单位 s Number - 0.5
gapTime 轮播图间隔时间 单位 s Number - 4
swipeable 是否可滑动 Boolean true,false true

事件

事件 描述 参数
change 图片切换时触发 index(当前图片的索引)