用过swiper的人都知道，swiper给我们提供了许多不同形式的轮播图，它们都是用面向对象的形式封装的。本人尝试了用构造函数封装出同样的效果，封装的不好大家见谅。
首先html代码如下：
<div class="box swiper">
<ul class="big">
<li style="background:#00a0af">
<li style="background:#82a6af">
<li style="background:#21af41">
<li style="background:#af46ad">
<li style="background:#619eaf">
<ul class="small">
<div class="left"> <
<div class="right"> >
</div>
css代码如下：
.box{
width:300px;
height:200px;
}
.swiper{
overflow:hidden;
position:relative;
margin:0 auto;
}
.big{
position:absolute;
}
.big li{
float:left;
}
.small{
height:20px;
position:absolute;
}
.small li{
margin-left:10px;
background:grey;
float:left;
}
.small li.active{
background:#0F0F0F;
}
div{
width:40px;
height:40px;
background:#0a6cd6;
position:absolute;
}
最重要的js代码如下：
首先创建一个构造函数swiper
function Swiper(box,json) {
this.box=document.querySelector(box);
this.bul=document.querySelector(box+' .big');
this.bli=document.querySelectorAll(box+' .big li');
this.sul=document.querySelector(box+' .small');
this.sleft=document.querySelector(box+' .left');
this.sright=document.querySelector(box+' .right'); //获取元素
this.timer=null; //定时器
this.iNow=0; //计数器
this.json=json || {}; //判断有没有传参
this.auto=this.json.autoplay ||'true'; //是否自动轮播
this.time=this.json.time ||2000; //切换时间
this.event=this.json.event ||'click'; //切换事件
this.init(); //初始化
}
Swiper.prototype.init=function () {
let boxwidth=this.box.offsetWidth;
let boxheight=this.box.offsetHeight;
this.bul.style.width=this.bli.length*boxwidth+'px';
this.sul.style.width=this.bli.length*30+'px';
this.sul.style.top=boxheight-this.sul.offsetHeight+'px';
this.sul.style.left=(boxwidth-this.sul.offsetWidth)/2+'px';
this.sleft.style.top=(boxheight-this.sleft.offsetHeight)/2+'px';
this.sleft.style.left=10+'px';
this.sright.style.top=(boxheight-this.sright.offsetHeight)/2+'px';
this.sright.style.right=10+'px'; //以上为根据box的大小调节圆点和左右键的大小和位置
for(let i=0;i<this.bli.length;i++){
this.bli[i].style.width=boxwidth+'px';
this.bli[i].style.height=boxheight+'px';
let oLi=document.createElement('li');
this.sul.appendChild(oLi);
} //根据图片的个数创建对应的几个圆点
this.sli=document.querySelectorAll('.box .small li'); //获取圆点
for(let i=0;i<this.sli.length;i++){
this.sli[i].style.width=20+'px';
this.sli[i].style.height=20+'px';
} //设置宽高
this.sli[0].className='active';
var _this=this; //在事件内使用this的话，this指向的是最外层 的div，所以要先让 指向swiper的this赋值给_this,这样使用就不会出问题了
if(this.auto=='true'){
this.autoplay(); //如果有传参为true的话，则一开始就自动轮播
}
this.box.onmouseenter=function(){
_this.enter(); //鼠标移入时，执行函数
};
this.box.onmouseleave=function(){
_this.leave(); //鼠标移出时，执行函数
};
this.sleft.onclick=function () { //点击左方向键时
_this.iNow--;
if(_this.iNow<0){
_this.iNow=_this.bli.length-1;
}
_this.move();
}
this.sright.onclick=function () { //点击右方向键时
_this.iNow++;
if(_this.iNow==_this.bli.length){
_this.iNow=0;
}
_this.move();
}
for(let i=0;i<this.sli.length;i++){ //给每一个圆点加点击事件
this.sli[i]['on'+this.event]=function () {
_this.iNow=i;
_this.move();
}
}
}
Swiper.prototype.autoplay=function () {
var _this=this;
this.timer=setInterval(function () {
_this.iNow++;
if(_this.iNow==_this.bli.length){
_this.iNow=0;
}
_this.move();
},this.time);
}
Swiper.prototype.move=function () {
for(var i=0;i
this.sli[i].className='';
}
this.sli[this.iNow].className='active';
this.bul.style.left=-this.iNow*this.bli[0].offsetWidth+'px';
}
Swiper.prototype.enter=function () {
clearInterval(this.timer);
}
Swiper.prototype.leave=function () {
this.autoplay();
}
最后我们调用构造函数时可以
new Swiper('.box',{
autoplay:'false', //true
time:1000,//1000
event:'mouseover',//click,
});
也可以不传参直接new Swiper('.box');
网友评论