【jQuery插件】slideImg-广告轮播,焦点图效果
时间:2011年07月11日作者:愚人码头查看次数:5,097 views评论次数:13
感谢 留痕 网友提交的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/


最新评论
非常好
Post:2012-02-08 21:59:12@linda, 没见过世面吧你,老板才8 »
Post:2012-02-07 18:11:22码头哥,换个链接,http://www.ijo »
Post:2012-02-07 17:18:45currying: 科里化
Post:2012-02-06 15:51:18貌似在线api已经下不了了
Post:2012-02-06 11:25:19图片被防盗链了,哈哈~
Post:2012-02-06 10:29:45对你造成的不便非常抱歉,简易你卸 »
Post:2012-02-05 14:45:16您好,请问air版本的自动更新怎么去 »
Post:2012-02-05 12:06:24