【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 strDiv+='
strLi+=i==0?'
':' ';}
strDiv+='
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[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 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(); } }