首页 > 代码库 > 面向对象轮播
面向对象轮播
/*
面向对象的图片轮播,图片的最后一张是第一张图,图片的第一张是最后一张图,鼠标移入暂停轮播,可点击按钮和页码切换图片
使用时需要获取一下对应的元素对象
*/
// var outer = $("#outer");//获取最大的框
// var oInner = $("#inner");//获取ul
// var item = $("#inner li");//获取li
// var leftBtn = $("#leftBtn");//获取左边按钮
// var rightBtn = $("#rightBtn");//获取右边按钮
// var pageList = $("#pageList");//获取页码的ul
// var pageBtn = $("#pageList li");//获取也页码的li
function Lunbo(outer,oInner,item,leftBtn,rightBtn,pageList,pageBtn){
this.outer = outer;
this.oInner = oInner;
this.item = item;
this.leftBtn = leftBtn;
this.rightBtn = rightBtn;
this.pageList = pageList;
this.pageBtn = pageBtn;
this.pageNum = 1;
this.autoPlay();
this.pause();
this.btn();
this.pagination();
}
Lunbo.prototype.autoPlay = function(){
var that = this;
this.time = setInterval(function(){
that.pageChange(that);
},3000);
}
Lunbo.prototype.pageChange = function(that){
that.pageNum++;
that.count();
}
Lunbo.prototype.count = function(fn){
var start = parseInt(oGet.getStyle(this.oInner,"left"));
var end = -this.pageNum*640;
var step = (end - start)/100;
if(fn){
this.move(start,end,step,fn);
}else{
this.move(start,end,step);
}
}
Lunbo.prototype.active = function(){
for(var i=0;i<this.pageBtn.length;i++){
this.pageBtn[i].className = "";
}
this.pageBtn[this.pageNum-1].className = "active";
}
Lunbo.prototype.move = function(start,end,step,fn){
var num = 0;
var that = this;
this.oInner.time = setInterval(function(){
start += step;
num++;
if(num==100){
clearInterval(that.oInner.time);
start = end;
if(step<0&&that.pageNum==that.item.length-1){
that.pageNum = 1;
start = -that.item[0].offsetWidth;
}else if(step>0&&that.pageNum==0){
that.pageNum = that.item.length-2;
start = -that.item[0].offsetWidth*that.pageNum;
}
if(fn){
fn();
}
that.active();
}
that.oInner.style.left = start + "px";
})
}
Lunbo.prototype.pause = function(){
var that = this;
this.outer.onmouseover = function(){
clearInterval(that.time);
that.leftBtn.style.display = "block";
that.rightBtn.style.display = "block";
}
this.outer.onmouseout = function(){
that.autoPlay();
that.leftBtn.style.display = "";
that.rightBtn.style.display = "";
}
}
Lunbo.prototype.btn = function(){
var that = this;
this.leftBtn.lock = true;
this.rightBtn.lock = true;
this.leftBtn.onclick = function(){
if(that.leftBtn.lock&&that.rightBtn.lock){
that.leftBtn.lock = false;
that.pageNum --;
that.count(function(){
that.leftBtn.lock = true;
});
}
}
this.rightBtn.onclick = function(){
if(that.leftBtn.lock&&that.rightBtn.lock){
that.rightBtn.lock = false;
that.pageNum ++;
that.count(function(){
that.rightBtn.lock = true;
});
}
}
}
Lunbo.prototype.pagination = function(){
var that = this;
console.log(that.pageBtn)
for(var i=0;i<this.pageBtn.length;i++){
this.pageBtn[i].index = i;
this.pageBtn[i].onclick = function(){
that.pageNum = this.index + 1;
that.count();
}
}
}
//var newLunbo = new Lunbo(outer,oInner,item,leftBtn,rightBtn,pageList,pageBtn);
面向对象轮播