基于jQuery淡入淡出可自动切换的幻灯插件(2011.01.11更新)

此插件是对10年8月20日的文章的更新, 之前的版本有诸多bug...抱着对读者负责的态度,又重写了一次.

更新内容: 

1. 用户快速划过按钮时不触发鼠标事件; 

2. 鼠标划入当前图片按钮时不闪烁; 

3. 简化并优化代码.

使用方法就不详述了, 请参见源码及相关注释:点此查看DEMO

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

$.fn.iFadeSlide = function(iSet){     /*      * iSet可选参数说明:      * iSet.field==>幻灯区域内的图片集      * iSet.ico==>按钮钩子      * iSet.high==>按钮高亮样式      * iSet.index==>默认高亮的图片索引(从1计)      * iSet.interval==>图片切换时间      * iSet.leaveTime==>不触发鼠标划入事件的最大时间值      * iSet.fadeInTime==>淡入时间      * iSet.fadeOutTime==>淡出时间      * 调用方式$(document).iFadeSlide({field:'...',ico:'...',...})      */     iSet = iSet || {};     var imgField = $(iSet.field || '#slide>img');     var icoField = $(iSet.ico || '#ico');     var icoHighCls = iSet.high || 'high';     var curIndex = iSet.index || 1;     var slideInterval = iSet.interval || 3000;     var hoverTime = iSet.leaveTime || 150;     var fadeOutTime = iSet.fadeOutTime || 400;     var fadeInTime = iSet.fadeInTime || 400;     var icos=null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null;     var icoHtml = '<ul>';     //按图片传入对应的按钮     imgField.each(function(i){         icoHtml += '<li>' + (i + 1) + '</li>';     });     icoHtml += '</ul>';     icoField.append(icoHtml);     //淡入淡出函数     changeFun = function(n){         imgField.filter(':visible').fadeOut(fadeOutTime, function(){             imgField.eq(n).fadeIn(fadeInTime)             icos.eq(n).addClass(icoHighCls).siblings().removeClass(icoHighCls);         });     }     icos = icoField.find('ul>li');     //为第一个按键初始化高亮     icos.first().addClass(icoHighCls);     //按钮鼠标划入划出事件     icos.hover(function(){         clearInterval(autoSlideFun);         curIndex = icos.index(this);         hasIcoHighName = $(this).hasClass(icoHighCls);         //setTimeout避免用户快速(无意识性划过)划过时触发事件         fastHoverFun = setTimeout(function(){             //鼠标划入当前图片按钮时不闪烁             if (!hasIcoHighName) {                 changeFun(curIndex);             }         }, hoverTime);     }, function(){         clearTimeout(fastHoverFun);         //自动切换         autoSlideFun = setInterval(function(){             changeFun(curIndex);             curIndex++;             //为什么会在3时切换到0?请看下changeFun,curIndex是下一张图片的索引值             if (curIndex == 3) {                 curIndex = 0;             }         }, slideInterval)     }).eq(0).trigger('mouseleave');           //当鼠标划入图片区域时停止切换     imgField.hover(function(){         curIndex = imgField.index(this);         clearInterval(autoSlideFun);     }, function(){         icos.eq(curIndex).trigger('mouseleave');     }); }

原文发布于Mr.Think的博客:http://mrthink.net/jq-plugin-ifadeslide/ 转载请注明