一个页面,多个flash(刚学jq插件)

只贴js那部分哦

调用

// flash轮播图
var sumF=$('.btnTabs span').length/4; //有四个flash
var flashT01=new flash($('.flash01'),sumF);
var flashT02=new flash($('.flash02'),sumF);
var flashT03=new flash($('.flash03'),sumF);
var flashT04=new flash($('.flash04'),sumF);
flashT01.createF();
flashT02.createF();
flashT03.createF();
flashT04.createF();

详细代码

/**
*
* @authors Jerry wong (you@example.org)
* @date 2015-04-16 09:23:42
* @version $Id$
*/ function flash(ele,num){
this.num=num;
this.element=ele;
this.timer=null;
this.oIndex=0; } flash.prototype={
createF:function(){
var _this=this;
_this.autoP();
$(_this.element).find('.btnNext').click(function(){
_this.nextBtn();
_this.autoP();
});
$(_this.element).find('.btnPrev').click(function(){
_this.prevBtn();
_this.autoP();
});
$(_this.element).find('.btnTabs span').click(function(){
_this.numClick(this);
_this.autoP();
});
},
nextBtn:function(){
this.oIndex++;
if (this.oIndex>=this.num) {
this.oIndex=0;
};
$(this.element).find('.adImg').eq(this.oIndex).fadeIn().siblings('.adImg').fadeOut();
$(this.element).find('.btnTabs').children('span').eq(this.oIndex).addClass('selected').siblings().removeClass('selected');
},
prevBtn:function(){
this.oIndex--;
if (this.oIndex<0) {
this.oIndex=this.num-1;
};
$(this.element).find('.adImg').eq(this.oIndex).fadeIn().siblings('.adImg').fadeOut();
$(this.element).find('.btnTabs').children('span').eq(this.oIndex).addClass('selected').siblings().removeClass('selected');
},
numClick:function(ev){
this.oIndex=$(ev).index();
$(ev).addClass('selected').siblings().removeClass('selected');
$(ev).parents().siblings('ul').children('.adImg').hide().eq(this.oIndex).fadeIn();
},
autoP:function(){
var _this=this;
clearInterval(_this.timer);
_this.timer=setInterval(function(){
_this.oIndex++;
if (_this.oIndex>_this.num-1) {
_this.oIndex=0;
};
$(_this.element).find('.adImg').eq(_this.oIndex).fadeIn().siblings('.adImg').fadeOut();
$(_this.element).find('.btnTabs').children('span').eq(_this.oIndex).addClass('selected').siblings().removeClass('selected');
}, 3000); }
}
上一篇:PL/SQL远程备份和恢复Oracle数据库


下一篇:关于在jsp中的路径问题