浅谈JS无缝轮播图插件封装.docx
- 文档编号：24821314
- 上传时间：2023-06-01
- 格式：DOCX
- 页数：11
- 大小：18.21KB
浅谈JS无缝轮播图插件封装.docx
《浅谈JS无缝轮播图插件封装.docx》由会员分享，可在线阅读，更多相关《浅谈JS无缝轮播图插件封装.docx（11页珍藏版）》请在冰豆网上搜索。
浅谈JS无缝轮播图插件封装
浅谈无缝轮播图插件封装
前言：
页面中轮播图，对于一个前端开发者来说，是最基本的技能，不论是的商城，还是企业站，轮播图已经成为不可缺少的一个模块，而常见的轮播图不外乎两种，一种是渐隐渐现轮播图，一种是无缝轮播图。
网上关于轮播图的件也有很多，但是用人家的代码总会出现各种各样的bug，我们修改bug往往要耗费很多时间，而且有些插件的效果还不符合我们的需求，那么我们该如何封装一个自己的轮播插件呢？
这就是我们今天的任务，封装轮播插件。
1、特效离不开合理的页面布局，所以我们首先需要进行页面布局：
HTML代码：
-- 分页器 -->
-- 导航按钮 -->
2、在HTML页面中引入css样式文件：
css样式文件代码如下：
CSS代码：
* {
margin:
0;
padding:
0;
}
ul,
li {
list-style:
none;
}
.container {
margin:
200px auto;
position:
relative;
overflow:
hidden;
}
.slide {
float:
left;
}
img {
display:
block;
}
.pagination {
width:
160px;
position:
absolute;
bottom:
30px;
margin-left:
-80px;
left:
50%;
}
.pagination li {
float:
left;
width:
20px;
height:
20px;
background-color:
blue;
margin:
0 10px;
border-radius:
50%;
}
.button-pre,
.button-next {
width:
22px;
height:
40px;
position:
absolute;
top:
50%;
margin-top:
-20px;
}
.button-pre {
left:
30px;
background:
url（'../image/left.png'） no-repeat center center;
}
.button-next {
right:
30px;
background:
url（'../image/right.png'） no-repeat center center;
}
.pagination .active {
background-color:
red;
}
.mycontainer{
width:
590px;
height:
470px;
}
页面布局完成后，接下来就是javaScript代码，绑定事件；
在绑定事件之前，我们首先要知道无缝轮播图的原理和一些技术关键点。
轮播图的原理：
最外层视野区域固定大小且的溢出隐藏，通过动态控制包裹图片的父元素的marginLeft值实现轮播；
关键点1：
最外层的盒子container固定大小，是我们的视野区域，需要设置溢出隐藏overflow：
hidden；
关键点2：
所有轮播的图片使用一个共同的父元素wrapper包裹起来；
关键点3：
动态克隆第一X图片所在的元素silde，然后添加到最后；
关键点4：
父元素wrapper的宽度为图片个数（原始图片个数+1，因为克隆多添加了一X图片）乘以单独一X图片的宽度；
关键点5：
实现无缝轮播的判断条件，marginleft样式重置时机；
关键点6：
动态生成分页器按钮，并设置分页器pagination样式；
关键点7：
实现自动播放和清除播放，使用计时器setInterval（）和clearInterval（）
关键点8：
实现代码复用，借助面向对象的开发——构造函数+原型对象+jQuery插件封装机制实现
3、关键点梳理完之后，就可以开始javascript代码：
通过自执行函数实现；需要在HTML页面引入JS文件，JS文件代码如下：
JS代码：
;（function（$）{
// 默认设置
var defaults = {
speed:
1000,
interval:
2000
}
function Banner（ele,options）{
// 获取元素对象
this.element = $（ele）;
// 合并设置项
this.options = $.extend（{},defaults,options）;
// 获取包裹图片的父元素
this.wrapper = this.element.children（）.first（）;
// 获取要克隆的元素
this.firstChild = this.wrapper.find（'.slide:
first'）;
// 获取一X图片宽度
this.Width = this.firstChild.width（）;
// 记录图片下标
this.n = 0;
// 获取图片个数
this.len = this.wrapper.find（'.slide'）.length;
// 获取切换导航按钮
this.prev = this.element.find（'.button-pre'）;
this.next = this.element.find（'.button-next'）;
// 获取分页器
this.pagination = this.element.find（'.pagination'）;
// 计时器
this.timer = null;
}
// 初始化
Banner.prototype.init = function（）{
var self = this;
（function （） {
// 克隆第一X图片并添加到元素的最后边，设置包裹图片父盒子的宽度
self.wrapper.append（self.firstChild.clone（true））;
self.wrapper.css（{ width:
self.Width * （self.len + 1）}）;
// 生成对应的分页器按钮
for（var i = 0; i < self.len; i++）{
$（'
'）.appendTo（self.pagination）; }
// 动态设置分页器的样式
self.pagination.find（'li:
first'）.addClass（'active'）;
var btnWidth = self.pagination.find（'li:
first'）.outerWidth（true） * self.len;
self.pagination.css（{width:
btnWidth,marginLeft:
-btnWidth / 2}）
}）（）
// 调用所有绑定的事件
this.nextClick（）;
this.preClick（）;
this.btnClick（）;
this.autoPlay（）;
this.clearPlay（this.element）;
}
// 切换下一X图片事件
Banner.prototype.nextClick = function（）{
var self = this;
this.next.click（function（）{
self.moveNext（）;
}）
}
// 切换图片，同时也为实现自动播放
Banner.prototype.moveNext = function（） {
this.n++;
// 判断重置时机和重置样式
if （this.n > this.len ） {
this.n = 1;
this.wrapper.css（{ marginLeft:
0 }）;
}
this.changeBtn（this.n > 3 ?
0 :
this.n）;
this.wrapper.stop（true,true）.animate（{ marginLeft:
-this.Width * this.n }, this.options.speed）
}
// 点击切换上一X图片
Banner.prototype.preClick = function（）{
var self = this;
this.prev.click（function （） {
self.n--;
if （self.n < 0） {
self.n = self.len - 1;
self.wrapper.css（{ marginLeft:
-（self.len） * self.Width }）;
}
self.changeBtn（self.n < 0 ?
self.n = 3 :
self.n）;
self.wrapper.animate（{ marginLeft:
-self.Width * self.n }, self.options.speed）
}）
}
// 点击分页器切换图片
Banner.prototype.btnClick = function（）{
var self = this;
this.pagination.find（'li'）.click（function （） {
var index = $（this）.index（）;
self.n = index;
self.changeBtn（index）;
self.wrapper.animate（{ marginLeft:
-self.Width * index }, self.options.speed）
}）
}
// 动态修改分页器按钮的样式
Banner.prototype.changeBtn = function（index）{
this.pagination.find（'li'）.eq（index）.addClass（'active'）.siblings（）.removeClass（'active'）;
}
// 自动轮播
Banner.prototype.autoPlay = function（）{
var self = this;
/* 计时器中调用函数是，函数中的this 指向 window， 所以需要使用self.timer = setInterval（function（）{
self.moveNext（）;
},2000）;
不能直接使用 self.timer = setInterval（self.moveNext（）,2000）; 形式 */
self.timer = setInterval（function（）{
self.moveNext（）;
},self.options.interval）;
}
// 清除自动播放
Banner.prototype.clearPlay = function（ele）{
var self = this;
ele.mouseenter（function（）{
clearInterval（self.timer）
}）.mouseleave（function（）{
// 再次开启自动轮播
self.timer = setInterval（function（）{
self.moveNext（）;
},self.options.interval）;
}）
}
// jQuery插件实现
$.fn.myBanner = function（params）{
// params 是自定义的配置项
var banner = new Banner（this,params）;
banner.init（）;
// 如果需要链式调用
return this;
}
}）（jQuery）
最后在HTML页面中进行初始化，最好放到HTML结束标签之前的位置，因为我们封装的插件是依赖于jQuery的，因此首先引入jQuery文件，然后在引入我们自己封装的js文件；最后就是进行初始化设置：
到此为止，我们已经实现了轮播插件的封装并且实现了复用，只需要动态的绑定不同的元素mycontainer（可以动态修改成自己的元素名字）即可实现复用。
4、如果需要修改容器的大小和图片的大小,可以直接覆盖样式即可：
.mycontainer2{
width:
300px;
height:
200px;
}
.mycontainer2 img{
width:
300px;
height:
200px;
}
5、完成。
恭喜你，你的轮播插件可以正常切换了
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
浅谈
JS
无缝
轮播图
插件
封装
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
《包装概论》课后习题汇总.docx
