网站地图
【www.gdgbn.com--jquery】
jquery淡入淡出可自动切换的幻灯插件
1. 用户快速划过按钮时不触发鼠标事件;
2. 鼠标划入当前图片按钮时不闪烁;
3. 简化并优化代码.
使用方法就不详述了, 请参见源码及相关注释
$.fn.ifadeslide = function(iset){
/*
* iset可选参数说明:
* iset.field==>幻灯区域内的图片集
* iset.ico==>按钮钩子
* iset.high==>按钮高亮样式
* iset.interval==>图片切换时间
* iset.leavetime==>不触发鼠标划入事件的最大时间值
* iset.fadeintime==>淡入时间
* iset.fadeouttime==>淡出时间
* 调用方式$(document).ifadeslide({field:"...",ico:"...",...})
*/
iset = $.extend({high:"high",interval:3000,leavetime:150,fadeouttime:400,fadeintime:400},iset);
var imgfield = $(iset.field || "#slide>img");
var icofield = $(iset.ico || "#ico");
var curindex = 0;
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,max=null;;
var icohtml = "";
max=imgfield.size();
//按图片传入对应的按钮
imgfield.each(function(i){
icohtml += "" + (i + 1) + "";
});
icohtml += "";
icofield.append(icohtml);
//淡入淡出函数
changefun = function(n){
imgfield.filter(":visible").fadeout(fadeouttime, function(){
imgfield.eq(n).fadein(fadeintime)
icos.eq(n).addclass(iset.high).siblings().removeclass(iset.high);
});
}
icos = icofield.find("ul>li");
//为第一个按键初始化高亮
icos.first().addclass(iset.high);
//按钮鼠标划入划出事件
icos.hover(function(){
clearinterval(autoslidefun);
curindex = icos.index(this);
hasicohighname = $(this).hasclass(iset.high);
//settimeout避免用户快速(无意识性划过)划过时触发事件
fasthoverfun = settimeout(function(){
//鼠标划入当前图片按钮时不闪烁
if (!hasicohighname) {
changefun(curindex);
}
}, hovertime);
}, function(){
cleartimeout(fasthoverfun);
//自动切换
autoslidefun = setinterval(function(){
curindex++;
changefun(curindex);
if (curindex ==max ) {
changefun(0);
curindex = 0;
}
}, slideinterval)
}).eq(0).trigger("mouseleave");
//当鼠标划入图片区域时停止切换
imgfield.hover(function(){
curindex = imgfield.index(this);
clearinterval(autoslidefun);
}, function(){
icos.eq(curindex).trigger("mouseleave");
});
}
实例完整代码
jquery代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
/*******************************
* @基于jquery淡入淡出可自动切换的幻灯插件
* @jquery vesion:1.4.2
* @plugin page:http://mrthink.net/jq-plugin-ifadeslide/
* @author mr.think
* @author blog http://mrthink.net/
* @creation date: 2011.01.11
*******************************/
$.fn.ifadeslide = function(iset){
/*
* iset可选参数说明:
* iset.field==>幻灯区域内的图片集
* iset.ico==>按钮钩子
* iset.high==>按钮高亮样式
* iset.interval==>图片切换时间
* iset.leavetime==>不触发鼠标划入事件的最大时间值
* iset.fadeintime==>淡入时间
* iset.fadeouttime==>淡出时间
* 调用方式$(document).ifadeslide({field:"...",ico:"...",...})
*/
iset = $.extend({high:"high",interval:3000,leavetime:150,fadeouttime:400,fadeintime:400},iset);
var imgfield = $(iset.field || "#slide>img");
var icofield = $(iset.ico || "#ico");
var curindex = 0;
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,max=null;;
var icohtml = "";
max=imgfield.size();
//按图片传入对应的按钮
imgfield.each(function(i){
icohtml += "" + (i + 1) + "";
});
icohtml += "";
icofield.append(icohtml);
//淡入淡出函数
changefun = function(n){
imgfield.filter(":visible").fadeout(fadeouttime, function(){
imgfield.eq(n).fadein(fadeintime)
icos.eq(n).addclass(iset.high).siblings().removeclass(iset.high);
});
}
icos = icofield.find("ul>li");
//为第一个按键初始化高亮
icos.first().addclass(iset.high);
//按钮鼠标划入划出事件
icos.hover(function(){
clearinterval(autoslidefun);
curindex = icos.index(this);
hasicohighname = $(this).hasclass(iset.high);
//settimeout避免用户快速(无意识性划过)划过时触发事件
fasthoverfun = settimeout(function(){
//鼠标划入当前图片按钮时不闪烁
if (!hasicohighname) {
changefun(curindex);
}
}, hovertime);
}, function(){
cleartimeout(fasthoverfun);
//自动切换
autoslidefun = setinterval(function(){
curindex++;
changefun(curindex);
if (curindex ==max ) {
changefun(0);
curindex = 0;
}
}, slideinterval)
}).eq(0).trigger("mouseleave");
//当鼠标划入图片区域时停止切换
imgfield.hover(function(){
curindex = imgfield.index(this);
clearinterval(autoslidefun);
}, function(){
icos.eq(curindex).trigger("mouseleave");
});
}
$(function(){
//sample-a
$(document).ifadeslide();
//sample-b
$(document).ifadeslide({
field: $("div#slide_b a"),
ico:$("div.ico_b"),
high: "high_b",
interval: 2000
});
//sample-c
$(document).ifadeslide({
field: $("div#slide_c img"),
ico: $("div.ico_c"),
fadeouttime:100,
fadeintime: 200
});
});
</script>
html代码
