最近用原生js封装了一个选项卡，但是我想要类似superslide那样调用的效果：$('.tab').funTab({titItem:'.tab-title',contItem:'.tab-cont',trig:'click',on:'on'});注解与需求：$('.tab')规定父选择器，一个规定各种参数集合的对象（{titItem:'.tab-title',contItem:'.tab-cont',trig:'click',on:'on'}）作为参数传入函数。我的思路是：函数作为$('.tab')对象的方法来定义，但是感觉无从下手。贴下我用原生实现的代码吧。求大神帮忙实现jquery写法。html代码： <div class="tab" id="tab">
<div class="tab-title" id="tab-title">
<ol class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab-cont" id="tab-cont">
<ul class="clearfix">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>css代码： * { margin:0; padding:0;}
li { list-style: none;}
.clearfix:after {
content: "" ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
.tab-title li{ float: left; width: 100px; height: 50px; text-align: center;cursor:pointer; line-height: 50px;}
.tab-title li.on { background: purple; color: #fff;}
.tab-cont li { width: 300px; height: 300px;text-align: center; border: 1px solid #333;}js代码： window.onload = function(){
var funTab = new FunTab('tab');
funTab.init('onmouseover','on');
//funTab.autoPlay(2000,'on'); //有bug
};
//创建构造函数
function FunTab(id){
this.oTab = document.getElementById(id);
this.tit = this.oTab.getElementsByTagName('ol');
this.cont = this.oTab.getElementsByTagName('ul');
this.titItem = this.tit[0].getElementsByTagName('li');
this.contItem = this.cont[0].getElementsByTagName('li');
this.iNow = 0;
}
//原型
FunTab.prototype = {
init : function(trig,on){
var This = this;
//设置触发方式、类名初始值
trig = trig || 'onclick';
on = on ? on : 'on';
for (var i=0;i<this.titItem.length;i++){
this.titItem[i].index = i;
this.contItem[i].style.display = 'none';
this.contItem[0].style.display = 'block';
this.titItem[i].className = '';
this.titItem[0].className = on;
this.titItem[i][trig] = function(){
This.change(this,on);
}
}
},
change : function(obj,on){
for (var i=0;i<this.titItem.length;i++){
this.titItem[i].className = '';
obj.className = on;
this.contItem[i].style.display = 'none';
this.contItem[obj.index].style.display = 'block';
}
},
autoPlay : function(delayTime,on){ //这里要怎么重用这个on呢???
var This = this;
//设置时间间隔初始值
delayTime = delayTime || 1500;
var timer = function(){
if (This.iNow == This.titItem.length-1){
This.iNow = 0;
}
else {
This.iNow++;
}
for (var i=0;i<This.iNow;i++){
This.titItem[i].className = '';
This.contItem[i].style.display = 'none';
}
console.log(This.iNow);
This.titItem[This.iNow].className = on;
This.contItem[This.iNow].style.display = 'block';
}
setInterval(timer,delayTime);
//鼠标移入选项卡时禁用自动播放
This.oTab.onmouseEnter = function(){
clearInterval(timer);
}
}
}另外，我用原生写的autoPlay方法也有bug，能指出就更好啦^_^
添加回答
举报
0/150
提交
取消