感谢 留痕 网友提交的bug,bug主要原因是我忽视了多个广告轮播和样式重名的问题;经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播,焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455
这次这个插件主要解决了两个问题:
1.当焦点图只有一张的时候不滚动;
2.当鼠标经过右下角图片选择的控制点上加了延时,避免在用户不经意划过这些控制点的时候切换图片。
具体插件代码:
/** * @author 愚人码头 * User: feiwen * Date: 11-7-11 * Time: 下午4:30 * Settings:{ * speed:滚动速度 * timer:滚动的时间间隔 * } */ (function($) { $.fn.slideImg = function(settings) { settings = jQuery.extend({ speed: "normal", timer: 1000 }, settings); return this.each(function() { $.fn.slideImg.scllor($(this), settings); }); }; $.fn.slideImg.scllor = function($this, settings) { var index = 0; var scllorer=$(".img-box li",$this); var size=scllorer.size(); var slideH=scllorer.outerHeight(); var $selItem=$("<ul></ul>",{ "class":"flash_item", html:function(){ var $selItemHTML=""; if(size==1){ return; }else if(size>1){ for(var i=0;i<size ;i++){ i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>'; } return $selItemHTML; } } }).appendTo($this); var li = $(".flash_item li",$this); var showBox = $(".img-box",$this); var intervalTime=null; li.hover(function() { var that=this; if (intervalTime) { clearInterval(intervalTime); } intervalTime = setTimeout(function() { index = li.index(that); ShowAD(index); }, 200); }, function() { clearInterval(intervalTime); interval(); }); showBox.hover(function() { if (intervalTime) { clearInterval(intervalTime); } }, function() { clearInterval(intervalTime); interval(); }); function interval(){ intervalTime = setInterval(function() { ShowAD(index); index++; if (index == size) { index = 0; } }, settings.timer); } interval(); var ShowAD = function(i) { showBox.animate({ "top": -i * slideH }, settings.speed); li.eq(i).addClass("on").siblings().removeClass("on"); }; }; })(jQuery);
demo演示地址:http://www.css88.com/demo/slide1/