图片轮播

天使891109

于 2016-06-06 14:49:47 发布

阅读量290

点赞数

文章标签：轮播图

本文链接：https://blog.csdn.net/lqr891109/article/details/51595455

版权

图片轮播功能的实现实例：

JS：

/**
* 自定义轮播图组件
*/
define(['jquery'],function($){
/*
* options
* seletor 必填，父级id
* */
var W=0;
var Carousel = function ( options ){
this.opts = options || {};
this.timer = null;
this.interval = 5000;
};

Carousel.prototype = {

constructor: Carousel,
init: function (){ //初始化
//获取对象
this.oBox=document.getElementById(this.opts.selector);
this.aDiv = this.oBox.children;
this.oBtn=document.getElementsByClassName('swiper-pagination')[0];
this.aSpan=this.oBtn.children;

//只有一张图时，不初始化轮播
if(this.aDiv.length>1){
//复制内容
this.oBox.innerHTML += this.oBox.innerHTML;
this.iNow=0;

//自动播放
this.autoPlay();
}
this.size();
},
size: function(){ //设置对象尺寸
//获得窗口的宽度
var winWidth = getWinWidth();

if(winWidth>1920) winWidth=1920;

//算ul宽度
this.oBox.style.width=this.aDiv.length*winWidth+'px';
//设置li的宽
for(var i=0; i<this.aDiv.length; i++){
this.aDiv[i].style.width = winWidth +'px';
}

this.W=this.oBox.offsetWidth/2;
W = this.W;
},

resize: function(){ //窗口resize
this.size();
this.tab();

},
next: function (){
this.iNow++;
this.tab();
},
prev: function (){
this.iNow--;
this.tab();
},
autoPlay: function (){ //自动播放
var _this = this;
clearInterval( this.timer );
this.timer = setInterval( function (){
_this.next();
},this.interval );
},
tab: function (){
if(this.aDiv.length>1){
for(var i=0; i<this.aSpan.length; i++){
this.aSpan[i].className='swiper-pagination-bullet';
}
if(this.iNow>0){
this.aSpan[this.iNow % this.aSpan.length].className= 'swiper-pagination-bullet swiper-pagination-bullet-active';
}else{
this.aSpan[(this.iNow % this.aSpan.length+this.aSpan.length) % this.aSpan.length].className= 'swiper-pagination-bullet swiper-pagination-bullet-active';
}
startMove(this.oBox,-this.iNow*this.aDiv[0].offsetWidth);
}

}
};

//继承
function extend (){
}

function getWinWidth(){ //获得窗口的宽
return document.documentElement.clientWidth || document.body.clientWidth;
}

//运动函数
var left=0;
var timer=null;
function startMove(obj,iTarget){
clearInterval(timer);
var count=Math.floor(900/30);
var start=left;
var dis=iTarget-start;
var n=0;

timer=setInterval(function(){
n++;
var a=1-n/count;
left=start+dis*(1-Math.pow(a,3));

if(left<0){
obj.style.left=left%W+'px';
}else{
obj.style.left=(left%W-W)%W+'px';
}

if(n==count){
clearInterval(timer);
}
},30);
}
return Carousel;
});