介绍
img-switcher是一个轻量级的前端库，可以帮助开发者在网页上实现图片不同状态间的切换。它可以构建一个图片数组，通过调用方法来控制显示不同图片，可以用于动态显示网页上的图片，如以下示例：
本文将详细介绍如何使用img-switcher。
安装
使用npm安装：
npm install img-switcher --save
使用
基本用法
引入img-switcher：
import ImgSwitcher from 'img-switcher';
创建img-switcher对象：
const imgSwitcher = new ImgSwitcher({
imgList: [
'url1',
'url2',
'url3'
]
});其中imgList是用于指定图片列表，数组的每个元素应为图片的URL地址。
调用setImage()方法实现图片切换：
imgSwitcher.setImage(1);
其中setImage()方法的参数为要显示的图片的序号，从0开始。
最终效果如下：
自定义配置
img-switcher提供了多个可配置项，以达到不同的效果。可配置项及默认值如下：
-- -------------------- ---- ------- ----- -------------- - - -------- --- ------- ------- --------- ----- --------------- ---- ------- ----- ------- ----- --------------- ----- ---------- ----- ----------------- ---- --
imgList
图片列表，详见基本用法。
target
绑定img-switcher的DOM元素，默认为body，可设置为任意元素选择器，如.container。
interval
自动切换图片的时间间隔，默认为5000ms。
transitionTime
切换图片时，动画效果的过渡时间，默认为500ms。
isLoop
是否启用循环模式，默认为true，设置为false时，图片到末尾将不再返回头部。
isAuto
是否启用自动切换模式，默认为true。
isChangeCursor
是否在鼠标移入区域时，更改鼠标指针样式，默认为true。
isUseCss3
在CSS3模式下，使用过渡动画效果。为了兼容旧版浏览器，此选项默认为true，也可手动设置为false，关闭CSS3模式。
isPreserveAspect
是否保持原始图片显示比例，默认为true，也可关闭，以填充整个元素。
自定义配置示例
-- -------------------- ---- -------
------ ----------- ---- ---------------
----- ----------- - --- -------------
-------- -
-------
-------
------
--
------- -------------
--------- -----
--------------- -----
------- ------
------- ------
--------------- ------
---------- ------
----------------- -----
---最终效果如下：
结语
现在你已经知道了如何使用img-switcher制作图片动画效果。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/142580