微客导航 » 文章资讯 » js实现无缝轮播图插件封装

js实现无缝轮播图插件封装

2023-07-19 12:54:03 217

前言：页面中轮播图，对于一个前端开发者来说，是最基本的技能，不论是的商城网站，还是企业站，轮播图已经成为不可缺少的一个模块，而常见的轮播图不外乎两种，一种是渐隐渐现轮播图，一种是无缝轮播图。网上关于轮播图的件也有很多，但是用人家的代码总会出现各种各样的bug，我们修改bug往往要耗费很多时间，而且有些插件的效果还不符合我们的需求，那么我们该如何封装一个自己的轮播插件呢？这就是我们今天的任务，封装轮播插件。

1、特效离不开合理的页面布局，所以我们首先需要进行页面布局：

HTML代码：

2、在HTML页面中引入css样式文件：css样式文件代码如下：

CSS代码：

*{
margin:0;
padding:0;
}

ul,
li{
list-style:none;
}

.container{
margin:200pxauto;
position:relative;
overflow:hidden;
}

.slide{
float:left;
}

img{
display:block;
}

.pagination{
width:160px;
position:absolute;
bottom:30px;
margin-left:-80px;
left:50%;
}

.paginationli{
float:left;
width:20px;
height:20px;
background-color:blue;
margin:010px;
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-repeatcentercenter;
}

.button-next{
right:30px;
background:url('../image/right.png')no-repeatcentercenter;
}

.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($){
//默认设置
vardefaults={
speed:1000,
interval:2000
}
functionBanner(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(){
varself=this;
(function(){
//克隆第一张图片并添加到元素的最后边，设置包裹图片父盒子的宽度
self.wrapper.append(self.firstChild.clone(true));
self.wrapper.css({width:self.Width*(self.len+1)});
//生成对应的分页器按钮
for(vari=0;i').appendTo(self.pagination);
}
//动态设置分页器的样式
self.pagination.find('li:first').addClass('active');
varbtnWidth=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(){
varself=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(){
varself=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(){
varself=this;
this.pagination.find('li').click(function(){
varindex=$(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(){
varself=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){
varself=this;
ele.mouseenter(function(){
clearInterval(self.timer)
}).mouseleave(function(){
//再次开启自动轮播
self.timer=setInterval(function(){
self.moveNext();
},self.options.interval);
})
}
//jQuery插件实现
$.fn.myBanner=function(params){
//params是自定义的配置项
varbanner=newBanner(this,params);
banner.init();
//如果需要链式调用
returnthis;
}
})(jQuery)

最后在HTML页面中进行初始化，最好放到HTML结束标签之前的位置，因为我们封装的插件是依赖于jQuery的，因此首先引入jQuery文件，然后在引入我们自己封装的js文件；最后就是进行初始化设置：

到此为止，我们已经实现了轮播插件的封装并且实现了复用，只需要动态的绑定不同的元素mycontainer（可以动态修改成自己的元素名字）即可实现复用。

4、如果需要修改容器的大小和图片的大小,可以直接覆盖样式即可：

.mycontainer2{
width:300px;
height:200px;
}
.mycontainer2img{
width:300px;
height:200px;
}

5、完成。恭喜你，你的轮播插件可以正常切换了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现无缝轮播图插件封装

热门推荐

随机推荐