$.fn.jqslider = function() { var fun = function(parentobj){ var pictotal = parentobj.find('.list-box li').length; //总共几张 var currentindex = 0; // 当前要显示的索引 var todisplaypicnumber = 1; // 定时器下一次执行用到的索引 var timer = null; // 定时器对象 var hideindex = 0; // 要隐藏的索引 var itime = 6000; // 间隔时间 //插入html代码 var speedhtml = '
'; for(var i=0; i').appendto(parentobj); //插入左右按钮 parentobj.find('.list-box li').eq(0).css({'opacity':1,'z-index':2}); parentobj.find('.speed-btn a').eq(0).addclass('selected'); //移上移下显示隐藏 parentobj.hover(function(){ cleartimeout(timer); parentobj.find('.prev-btn').show(); parentobj.find('.next-btn').show(); },function(){ parentobj.find('.prev-btn').hide(); parentobj.find('.next-btn').hide(); timer = settimeout(picnumclick, itime); //离开从新赋值 todisplaypicnumber = (currentindex + 1 == pictotal ? 0 : currentindex + 1); }); //下一个 parentobj.find('.next-btn').click(function(){ currentindex = (currentindex + 1 == pictotal ? 0 : currentindex + 1); displaypic(); }); //上一个 parentobj.find('.prev-btn').click(function(){ currentindex = (currentindex - 1 < 0 ? pictotal-1 : currentindex -1); displaypic(); }); //中间按钮 parentobj.find('.speed-btn a').click(function(){ currentindex = $(this).index(); displaypic(); }); //图片切换效果 function displaypic() { cleartimeout(timer); if(currentindex == hideindex){return;} parentobj.find('.list-box li').eq(currentindex).css({'opacity':1,'z-index':2}); parentobj.find('.list-box li').eq(hideindex).css({'z-index':5}).stop(true,true).animate({'opacity':0}, 300 , function(){ hideindex = currentindex; $(this).css({'z-index':1}); }); parentobj.find('.speed-btn a').eq(currentindex).addclass('selected').siblings().removeclass('selected'); } //循环调用自身 function picnumclick() { parentobj.find(".speed-btn a").eq(todisplaypicnumber).trigger("click"); todisplaypicnumber = (todisplaypicnumber + 1) % pictotal; timer = settimeout(picnumclick,itime); } settimeout(picnumclick, itime); }; return $(this).each(function() { fun($(this)); }); }