js插件代码如下:
$.fn.extend({ //焦点图 INA_focus:function(opt,callback){ if(!opt){} var _this=$(this),nr=_this.find(opt.qhys||"img"),controls=opt.controls||"ina_hdp",auto=opt.auto||"true",on=opt.on||"ina_dq",ina_click=opt.click||"click",time=opt.time||"5000",display=opt.display||"block",prevnext=opt.prevnext||"false"; if(nr.length>1){ nr.hide().eq(0).show(); _this.append("<div class=‘"+controls+"‘></div>"); for(var i=1;i<nr.length+1;i++){ if(i==1){_this.find("."+controls).append("<a href=‘javascript:void(0)‘ target=‘_self‘ class=‘"+on+"‘>"+i+"</a>")} else{_this.find("."+controls).append("<a href=‘javascript:void(0)‘ target=‘_self‘>"+i+"</a>")} } function qh(i){ if(auto=="true"){clearInterval(timer);} if(display=="block"){nr.hide().eq(i).show();if(auto=="true"){timer=window.setInterval(function(){ i++; if(i>=nr.length){i=0} qh(i) },time)}} else{ var width=nr.eq(0).outerWidth(); for(var j=0;j<nr.length;j++){ if(nr.eq(j).is(":visible")){ if(i>j){ nr.eq(i).show().css({left:width}).stop().animate({left:0}) nr.eq(j).css({left:0}).stop().animate({left:-width},function(){nr.eq(j).hide();if(auto=="true"){timer=window.setInterval(function(){ i++; if(i>=nr.length){i=0} qh(i) },time)}}) break; } else if(i<j){ nr.eq(i).show().css({left:-width}).stop().animate({left:0}) nr.eq(j).css({left:0}).stop().animate({left:width},function(){nr.eq(j).hide();if(auto=="true"){timer=window.setInterval(function(){ i++; if(i>=nr.length){i=0} qh(i) },time)}}) break; } } } } _this.find("."+controls).find("a").removeClass(on).eq(i).addClass(on); } if(prevnext=="true"){ _this.append("<div class=‘ina_pre‘><</div><div class=‘ina_next‘>></div>"); var pre=_this.find(".ina_pre"),next=_this.find(".ina_next"); pre.click(function(){ if(nr.is(":animated")){return false;} for(var i=0;i<nr.length;i++){ if(nr.eq(i).is(":visible")){ i--; if(i<0){i=nr.length-1} qh(i) break; } } }) next.click(function(){ if(nr.is(":animated")){return false;} for(var i=0;i<nr.length;i++){ if(nr.eq(i).is(":visible")){ i++; if(i>=nr.length){i=0} qh(i) break; } } }) } if(auto=="true"){ _this.find("."+controls).find("a").on(ina_click,function(){ if(nr.is(":animated")){return false;} clearInterval(timer); var n=$(this).index(); qh(n); }) var timer,m=0; timer=window.setInterval(function(){ m++; if(m>=nr.length){m=0} qh(m) },time) } else if(auto=="false"){ _this.find("."+controls).find("a").on(ina_click,function(){ qh($(this).index()) }) } } } })
调用方法如下:
$(".ina_focus").INA_focus({ qhys:"img", //切换元素,默认为img controls:"ina_hdp", //滑动控制按钮div的class,默认为ina_hdp auto:"", //是否自动切换true||false,默认为true on:"ina_dq", //当前选中按钮class,默认为ina_dq click:"mouseover", //滑动按钮切换方式,默认为click time:"3000", //自动切换间隔时间,默认5秒 display:"left", //显示方式left||block,向左滚动,默认为block prevnext:"false" //是否显示切换箭头 true||false 默认false })
时间: 2024-11-06 23:16:21