用過(guò)swiper的人都知道，swiper給我們提供了許多不同形式的輪播圖暗赶，它們都是用面向?qū)ο蟮男问椒庋b的彤避。本人嘗試了用構(gòu)造函數(shù)封裝出同樣的效果，封裝的不好大家見(jiàn)諒麦乞。
首先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代碼如下：
首先創(chuàng)建一個(gè)構(gòu)造函數(shù)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;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//定時(shí)器
? ? this.iNow=0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//計(jì)數(shù)器
? ? this.json=json || {};? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//判斷有沒(méi)有傳參
? ? this.auto=this.json.autoplay ||'true';? ? ? ? ? ? ? ? ? ? ? ? ?//是否自動(dòng)輪播
? ? this.time=this.json.time ||2000;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //切換時(shí)間
? ? 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';? ? ? ? ? ? ? ? //以上為根據(jù)box的大小調(diào)節(jié)圓點(diǎn)和左右鍵的大小和位置
? ? 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);
? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //根據(jù)圖片的個(gè)數(shù)創(chuàng)建對(duì)應(yīng)的幾個(gè)圓點(diǎn)
this.sli=document.querySelectorAll('.box .small li');? ? ?//獲取圓點(diǎn)
? ? for(let i=0;i<this.sli.length;i++){
this.sli[i].style.width=20+'px';
? ? ? ? this.sli[i].style.height=20+'px';
? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //設(shè)置寬高
this.sli[0].className='active';
? ? var _this=this;? ? ? ? ? ? ? ? ? ? ? ? //在事件內(nèi)使用this的話蕴茴，this指向的是最外層? 的div，所以要先讓? ? ? ? ? ????????????????????????????????????????????指向swiper的this賦值給_this,這樣使用就不會(huì)出問(wèn)題了
? ? if(this.auto=='true'){
this.autoplay();? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//如果有傳參為true的話姐直，則一開(kāi)始就自動(dòng)輪播
? ? }
this.box.onmouseenter=function(){
_this.enter();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //鼠標(biāo)移入時(shí)倦淀，執(zhí)行函數(shù)
? ? };
? ? this.box.onmouseleave=function(){
_this.leave();?????????????????????????????????//鼠標(biāo)移出時(shí)，執(zhí)行函數(shù)
? ? };
? ? this.sleft.onclick=function () {? ? ? //點(diǎn)擊左方向鍵時(shí)
_this.iNow--;
? ? ? ? if(_this.iNow<0){
_this.iNow=_this.bli.length-1;
? ? ? ? }
_this.move();
? ? }
this.sright.onclick=function () {? ? ? ? ?//點(diǎn)擊右方向鍵時(shí)
_this.iNow++;
? ? ? ? if(_this.iNow==_this.bli.length){
_this.iNow=0;
? ? ? ? }
_this.move();
? ? }
for(let i=0;i<this.sli.length;i++){? ? ? ? ? ? ? ?//給每一個(gè)圓點(diǎn)加點(diǎn)擊事件
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();
}
最后我們調(diào)用構(gòu)造函數(shù)時(shí)可以
?new Swiper('.box',{
? ? ?autoplay:'false', //true
? ? ?time:1000,//1000
? ? ?event:'mouseover',//click,
?});
也可以不傳參直接new Swiper('.box');
