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
})
原文:http://www.cnblogs.com/caiming/p/4546281.html