JS学习构造函数版轮播图

沧桑肥肥 2016-12-01 09:42

【1】轮播图构造函数版

function Mytab(id,duration) {

//获取元素

this.duration = duration || 2000;

this.oBox = document.getElementById(id);

this.oBoxInner = this.oBox.getElementsByTagName('div')[0];

this.aDiv = this.oBoxInner.getElementsByTagName('div');

this.aImg = this.oBoxInner.getElementsByTagName('img');

this.oUl = this.oBox.getElementsByTagName('ul')[0];

this.aLi = this.oUl.getElementsByTagName('li');

this.oLeft = this.oBox.getElementsByTagName('a')[0];

this.oRight = this.oBox.getElementsByTagName('a')[1];

this.data = null;

this.n = null;

this.time = null;

this.init();

}

Mytab.prototype = {

constructor: Mytab,

init: function () {

var _this=this;

//1.获取并解析数据

this.getDate();

//2.绑定数据

this.bind();

//3.图片加载；

this.lazyImg();

//4.图片轮播

clearInterval(this.timer);

this.timer=setInterval(function () {

_this.autoMove()

},2000);

//5.焦点轮播

//6.移入停止，移出继续

this.moveout();

//7.点击焦点自动轮播

this.handChange();

//8.点击按钮自动轮播

this.leftRight();

},

getDate: function () {

var _this=this;

var xml=new XMLHttpRequest;

xml.open('get','json/data.txt',false);

xml.onreadystatechange= function () {

if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){

_this.data=utils.jsonParse(xml.responseText);

}

};

xml.send(null);

console.log(this.data)

},

bind:function(){

var strDiv='';

var strLi='';

for(var i=0;i<this.data.length;i++){

strDiv+=' <div><img src="" realImg="'+this.data[i].imgSrc+'" alt=""/></div>';

strLi+=i==0?' <li class="on"></li>':' <li></li>';

}

strDiv+=' <div><img src="" realImg="'+this.data[0].imgSrc+'" alt=""/></div>';

this.oBoxInner.innerHTML+=strDiv;

this.oBoxInner.style.width=this.aDiv[0].offsetWidth*this.aDiv.length+'px';

console.log(this.oBoxInner.style.width)

this.oUl.innerHTML+=strLi;

},

lazyImg: function () {

var _this=this;

for(var i=0;i<_this.aImg.length;i++){

(function (i) {

var cur=_this.aImg[i];

var tmp=new Image;

tmp.src=cur.getAttribute('realImg');

tmp.οnlοad= function () {

cur.src=tmp.src;

tmp=null;

}

})(i)

}

},

autoMove: function () {

if(this.n>=this.aDiv.length-1){

this.n=0;

utils.css(this.oBoxInner,'left',-this.n*1000)

}

this.n++;

animate({

id:this.oBoxInner,

target:{

left:-this.n*1000

},

duration:800,

effect:2

});

this.bannerTip();

},

bannerTip: function () {

var tmp=this.n>=this.aDiv.length-1?0 :this.n;

for(var i=0;i<this.aLi.length;i++){

this.aLi[i].className=i==tmp?'on':null;

}

},

moveout: function () {

var _this=this;

this.oBox.οnmοuseοver= function () {

clearInterval(_this.timer);

_this.oLeft.style.display=_this.oRight.style.display='block'

};

this.oBox.οnmοuseοut= function () {

_this.timer=setInterval(function () {

_this.autoMove()

},_this.duration);

_this.oLeft.style.display= _this.oRight.style.display='none'

}

},

handChange: function () {

for(var i=0;i<this.aLi.length;i++){

var _this=this;

(function (i) {

_this.aLi[i].οnclick= function () {

_this.n=i;

animate({

id:_this.oBoxInner,

target:{

left:-_this.n*1000

},

duration:800,

effect:2

});

_this.bannerTip();

}

})(i)

}

},

leftRight: function () {

var _this=this;

this.oRight.οnclick=function(){

_this.autoMove();

};

this.oLeft.οnclick=function () {

if(_this.n<=0){

_this.n=_this.aDiv.length-1

utils.css(_this.oBoxInner,'left',-_this.n*1000)

}

_this.n--;

animate({

id:_this.oBoxInner,

target:{

left:-_this.n*1000

},

duration:800,

effect:2

});

_this.bannerTip();

}

}