我要评论前言：页面中轮播图，对于一个前端开发者来说，是最基本的技能，不论是的商城网站，还是企业站，轮播图已经成为不可缺少的一个模块，而常见的轮播图不外乎两种，一种是渐隐渐现轮播图，一种是无缝轮播图。网上关于轮播图的件也有很多，但是用人家的代码总会出现各种各样的bug，我们修改bug往往要耗费很多时间，而且有些插件的效果还不符合我们的需求，那么我们该如何封装一个自己的轮播插件呢？这就是我们今天的任务，封装轮播插件。
1、特效离不开合理的页面布局，所以我们首先需要进行页面布局：
html代码：
<div class="container mycontainer"> <div class="wrapper"> <div class="slide"> <img src="image/jd01.jpg" alt=""> </div> <div class="slide"> <img src="image/jd02.jpg" alt=""> </div> <div class="slide"> <img src="image/jd03.jpg" alt=""> </div> <div class="slide"> <img src="image/jd04.jpg" alt=""> </div> </div> <!-- 分页器 --> <ul class="pagination"></ul> <!-- 导航按钮 --> <div class="button-pre"></div> <div class="button-next"></div> </div>
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：动态克隆第一张图片所在的元素silde，然后添加到最后；
关键点4：父元素wrapper的宽度为图片个数（原始图片个数+1，因为克隆多添加了一张图片）乘以单独一张图片的宽度；
关键点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');
// 获取一张图片宽度
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 () {
// 克隆第一张图片并添加到元素的最后边，设置包裹图片父盒子的宽度
self.wrapper.append(self.firstchild.clone(true));
self.wrapper.css({ width:self.width * (self.len + 1)});
// 生成对应的分页器按钮
for(var i = 0; i < self.len; i++){
$('<li></li>').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);
}
// 切换下一张图片事件
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)
}
// 点击切换上一张图片
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文件；最后就是进行初始化设置：
<script>
$(function(){
$('.mycontainer').mybanner({
// speed:图片切换速度
// interval：图片切换的时间间隔
speed:500,
interval:3000
});
})
</script>
到此为止，我们已经实现了轮播插件的封装并且实现了复用，只需要动态的绑定不同的元素mycontainer（可以动态修改成自己的元素名字）即可实现复用。
4、如果需要修改容器的大小和图片的大小,可以直接覆盖样式即可：
.mycontainer2{
width: 300px;
height:200px;
}
.mycontainer2 img{
width: 300px;
height:200px;
}
5、完成。恭喜你，你的轮播插件可以正常切换了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论