loop-carousel v1.0.4

LoopCarousel

解决需要通过无限滚动动画展示一组图片或者其他列表的需求。

图片或列表的每一项的宽度可以不固定。

提供JS动画和CSS动画两种方式。

install

npm install loop-carousel -S

import

这个包只是一个方法，生产版本在/dist目录下:

const loopCarousel = require('loop-carousel')
/* or */
import loopCarousel from 'loop-carousel/dist'

use

首先我们需要一个容器并设置了overflow:hidden，然后这个展示列表作为唯一子元素在其中，这个展示列表的总宽度至少应该撑满整个屏幕宽，例如:

<div class="loop-carousel-wrapper" style="overflow:hidden;">
    <div class="loop-carousel-list" style="display:flex;">
        <img src=""><img src=""><img src=""><img src="">
    </div>
</div>

因为只需要简单的设置两个属性，所以就不额外写CSS文件了，展示列表的子项可以自行通过margin等方式设置间隔。

最基础的只需要这样使用，就可以看到动画了:

const el = document.querySelector('.loop-carousel-list')
loopCarousel(el)

该方法会根据这个展示列表的子元素大小和视口大小自动拷贝适量的DOM元素追加至其后。

其他配置参数:

/**
 * @param {HTMLDivElement} el 必须,一个块DOM
 * @param {number} spaceBetween 如果通过margin设置了子元素之间的间隔,请传入这个间隔的px值,默认0
 * @param {number} duration 每次滚动展示完成的时间,默认8s
 * @param {boolean} useJs 是否使用JS动画,默认false
 * @param {string} timingFn 动画函数,同CSS的'animation-timing-function',使用JS动画的情况下只允许默认值'linear'
 * @returns {object} 
 */

使用该方法返回的对象提供了一些属性和两个方法stopAnimation和runAnimation用来控制停止和活动，这在一些情况下比较适用:

const el = document.querySelector('.loop-carousel-list')
const obj = loopCarousel(el)
obj.stopAnimation() // 停止动画
obj.runAnimation() // 执行动画