面向对象选项卡组件

Posted 2020-08-19

离校实习前端工作一个月，第一次用面向对象写的点击切换选项卡组件，点击左右按钮分别切换不同的选项

基于JQ的一个组件

//创建构造函数
function ShowNews(selector){
　　this.i=0;
　　this.num=$(selector).length;
}
//添加切换方法
ShowNews.prototype.show=function(selector,nextbtn,prevbtn){
　　var _this=this;
//下一张
$(nextbtn).click(function(){
　　_this.i++;
　　if(_this.i>=_this.num){
　　　　_this.i=0;
　　}
　　$(selector).eq(_this.i).show().siblings().hide();
});
//上一张
$(prevbtn).click(function(){
　　_this.i--;
　　if(_this.i==-1){
　　　　_this.i=_this.num-1;
　　}
　　$(selector).eq(_this.i).show().siblings().hide();
})
}
//调用方法
var industryNew=new ShowNews(selector);
industryNew.show(selector,nextbtn,prevbtn);