js实现无缝轮播图插件封装
前言:页面中轮播图,对于一个前端开发者来说,是最基本的技能,不论是的商城网站,还是企业站,轮播图已经成为不可缺少的一个模块,而常见的轮播图不外乎两种,一种是渐隐渐现轮播图,一种是无缝轮播图。网上关于轮播图的件也有很多,但是用人家的代码总会出现各种各样的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、完成。恭喜你,你的轮播插件可以正常切换了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。