这段时间在公司做前端。由于滑动门、选项卡之类的JS特效用得多。所以萌生写一个类的想法。完成如下。
var scroller = function(){
this.initialize.apply(this,arguments);
}
scroller.prototype = {
initialize:function(tagsid,tagName,showsid,showTagName,currentShow,hovClass,clicked,autoPlay,interval){
this.tagsid =tagsid;
this.tagName = tagName;
this.showsid = showsid;
this.showTagName = showTagName;
this.currentShow = currentShow;
this.hovClass = hovClass.toLowerCase();
this.clicked = clicked;
this.autoPlay = autoPlay;
this.interval = interval;
this.create();
},
create:function(){
var $this =this;
var timer = null;
var num = this.currentShow;
var tags = this.$(this.tagsid).getElementsByTagName(this.tagName);
var shows = this.$(this.showsid).getElementsByTagName(this.showTagName);
if(tags.length != shows.length)return;
this.show(shows,tags,this.currentShow);
this.setIndex(tags);
for(var i=0;i<tags.length;i++){
switch(this.clicked){
case 0:
tags[i].onmouseover = function(){
$this.show(shows,tags,this.index);
}
break;
case 1:
tags[i].onclick = function(){
$this.show(shows,tags,this.index);
}
break;
}
}
if(this.autoPlay == 1){
timer = setInterval(play,$this.interval);
var s=0;
while(s<tags.length){
tags[s].onmouseover = function(){Stop(this.index);}
tags[s].onmouseout = function(){Goon(this.index);}
s++;
}
}
function Stop(m){
$this.show(shows,tags,m);
clearInterval(timer);
}
function Goon(m){
num = m;
timer = setInterval(play,$this.interval);
}
function play(){
$this.show(shows,tags,num);
num < tags.length-1 ? num++ : num=0;
}
},
show:function(s,o,n){
for(var i=0;i<o.length;i++){
s[i].style.display = 'none';
if(o[i].className.indexOf(this.hovClass)!= -1){
o[i].className = o[i].className.replace(this.hovClass,'');
}
}
s[n].style.display = 'block';
o[n].className = o[n].className + ' ' + this.hovClass;
},
setIndex:function(o){
for(var i=0;i<o.length;i++){
o[i].index = i;
}
},
$:function(o){
if(o){return document.getElementById(o);}
}
}
this.initialize.apply(this,arguments);
}
scroller.prototype = {
initialize:function(tagsid,tagName,showsid,showTagName,currentShow,hovClass,clicked,autoPlay,interval){
this.tagsid =tagsid;
this.tagName = tagName;
this.showsid = showsid;
this.showTagName = showTagName;
this.currentShow = currentShow;
this.hovClass = hovClass.toLowerCase();
this.clicked = clicked;
this.autoPlay = autoPlay;
this.interval = interval;
this.create();
},
create:function(){
var $this =this;
var timer = null;
var num = this.currentShow;
var tags = this.$(this.tagsid).getElementsByTagName(this.tagName);
var shows = this.$(this.showsid).getElementsByTagName(this.showTagName);
if(tags.length != shows.length)return;
this.show(shows,tags,this.currentShow);
this.setIndex(tags);
for(var i=0;i<tags.length;i++){
switch(this.clicked){
case 0:
tags[i].onmouseover = function(){
$this.show(shows,tags,this.index);
}
break;
case 1:
tags[i].onclick = function(){
$this.show(shows,tags,this.index);
}
break;
}
}
if(this.autoPlay == 1){
timer = setInterval(play,$this.interval);
var s=0;
while(s<tags.length){
tags[s].onmouseover = function(){Stop(this.index);}
tags[s].onmouseout = function(){Goon(this.index);}
s++;
}
}
function Stop(m){
$this.show(shows,tags,m);
clearInterval(timer);
}
function Goon(m){
num = m;
timer = setInterval(play,$this.interval);
}
function play(){
$this.show(shows,tags,num);
num < tags.length-1 ? num++ : num=0;
}
},
show:function(s,o,n){
for(var i=0;i<o.length;i++){
s[i].style.display = 'none';
if(o[i].className.indexOf(this.hovClass)!= -1){
o[i].className = o[i].className.replace(this.hovClass,'');
}
}
s[n].style.display = 'block';
o[n].className = o[n].className + ' ' + this.hovClass;
},
setIndex:function(o){
for(var i=0;i<o.length;i++){
o[i].index = i;
}
},
$:function(o){
if(o){return document.getElementById(o);}
}
}
用法:例如 var myscroller = new scroller('tags','li','shows','div',0,'hov',0,1,1000);
绑定id为tags的元素里面的li为标签,
id为shows的元素里的div为展示容器,
默认显示第1个:(0为第一个,1为第二个),
标签切换样式class:(标签上有class无所谓,已兼容多个样式),
鼠标切换模式:(1为点击切换,0为不点击切换),
自动播放:(1为自动播放,0为不自动播放),
自动播放时间间隔:(1000 = 1秒)
基本满足网站需要,功能有待完善中...
绑定id为tags的元素里面的li为标签,
id为shows的元素里的div为展示容器,
默认显示第1个:(0为第一个,1为第二个),
标签切换样式class:(标签上有class无所谓,已兼容多个样式),
鼠标切换模式:(1为点击切换,0为不点击切换),
自动播放:(1为自动播放,0为不自动播放),
自动播放时间间隔:(1000 = 1秒)
基本满足网站需要,功能有待完善中...