原生js封装的滑动式轮播插件

最近用单体单例模式写了一个可复用型轮播小插件。功能为——根据可自行设置：轮播图所在区域、图片宽度、图片高度、轮播图片数.自动创建轮播图。实现效果大概如下：

原生js封装的滑动式轮播插件

github代码地址为：https://github.com/COMINGLIU/-/tree/master/lunbo1

实现效果图中由于没有传入图片参数路径，所以将看到每张图都是以随机色进行填充的。

写完总结了一下，用到了下列知识点：

    1.单体单例模式封装
事件监听（EventUtil.addHandle）解决兼容问题
获取event(EventUtil.getEvent)解决兼容问题
获取触发event事件的目标target(EventUtil.getTarget)解决兼容
获取css样式（EventUtil.getStyle）解决兼容
文档碎片（document.createDocumentFrame()）降低dom操作，提升性能
利用e.type实现一个函数实现多个事件
解决了btn切换轮播图时的时延问题（当点击事件间隔小于动画完成时间）

使用方式如下：

Run.demo.init({
 // 轮播图所在容器
 oWrapper: document.querySelector(".content"),
 // 轮播图片的张数(如果传入将默认为4)
 num:4,
 // 轮播图的宽度（如果不传入将默认为300）
 itemW: 500,
 // 轮播图的高度（如果不传入将默认为180）
 itemH: 550,
 // 轮播图片集合的路径（如果不上传将自动生成随机色填充）
 // imgs: ["./imgs/one.jpg",
 // "./imgs/two.jpg",
 // "./imgs/three.jpg",
 // "./imgs/four.jpg",
 // "./imgs/five.jpg",
 // "./imgs/six.jpg"
 // ]
 })

注意：Run就是我封装的那个对象，所有轮播需要的元素都作为demo的对象

 使用解说：输入上述参数，会根据你的条件自动创建轮播图
 (1)调用对象Run.demo.init()函数，向函数init中传入如上述参数，参数以对象形式组织,如果要传入图片路径，以数组形式组织
 (2)设置所需css样式：
 //轮播所在容器（宽高与参数itemW与itemH一致，也可不一致，主要用途用于居中，如果不需要居中也可不传入）类名可自行设置
 .content {
 position: relative;
 overflow: hidden;
 width: 100px;
 height: 200px;
 margin: 0 auto;
 }
 //组织所有轮播图片所在li的ul
 ul {
 position: absolute;
 list-style: none;
 padding: 0;
 font-size: 0;
 transition: all 1.5s;
 }
 //设置所有轮播图片所在li为inline-block横向排列
 li {
 display: inline-block;
 }

html中代码如下：

<body>
 <div class="container">
 <div class="content">
 </div>
 </div>

</body>

原生js封装的滑动式轮播插件

相关推荐