基于jQuery的淡入淡出可自动切换的幻灯插件

2020-05-17 06:20:59易采站长站整理

index = ico.index(obj); //取当前索引值
//淡出当前可见元素,并通过索引值找到要淡入的元素
iset.field.filter(‘:visible’).fadeOut(iset.outTime, function(){
iset.field.eq(index).fadeIn(iset.inTime);
});
//为当前索引添加高亮样式并移除同级元素中的高亮样式
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset.hoverCls);
};
//切换函数
var changeFun = function(){
index++; //累积索引值
if (index == size){index = 0}; //当索引值等于切换元素量时,初始化为0
ico.eq(index).trigger(‘mouseleave’); //为当前的索引模拟鼠标划出元素区事件
};
//自动切换函数
var scrollFun = function(){
clearFun = setInterval(function(){
changeFun()
}, iset.interval);
};
//停止自动切换函数
var stopFun = function(){
clearInterval(clearFun);
};
scrollFun(); //初始自动切换
//索引区域鼠标划入停止自动切换并切换元素至当前索引,鼠标划出初始化索引至当前值(否则鼠标划出切换会乱)
ico.hover(function(){
stopFun();
fadeFun(this);
}, function(){
fadeFun(this);
}).eq(iset.curIndex).mouseleave(); //初始高亮显示的索引值
//切换区域鼠标划入停止自动切换,划出继续自动
iset.field.hover(function(){
stopFun();
}, function(){
scrollFun();
});
}
});
})(jQuery);

其他
本插件可自由使用,包括任何形式的商业用途,但使用时请勿必注明版权归属.
欢迎提出疑问及建议, 并期待对本插件扩展.
测试文件打包下载 http://xiazai.jb51.net/201008/yuanma/jQuery_iFadeSlide.rar