html图片自动切换的幻灯片效果的,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');

});

}

实例完整代码

.box{width:700px;height:250px}

/*sample-a*/

#slide { position:relative;width:200px; height:250px; overflow:hidden; border:1px solid #ccc; float:left}

#slide img{width:200px; height:250px;cursor:pointer}

#slide #ico{position:absolute; right:8px;bottom:6px}

#slide #ico li{background:#fff;float:left;display:block; width:15px; height:15px; line-height:15px;border:1px solid #cecece;font-family:arial, helvetica, sans-serif;text-align:center;margin:2px; padding: 1px;cursor:pointer}

#slide #ico li.high{background:#047;color:#fff;font-weight:bolder}

/*sample-b*/

#slide_b { position:relative;width:460px; height:250px; overflow:hidden; border:1px solid #ccc; float:right }

#slide_b img{width:460px; height:250px}

#slide_b .ico_b{position:absolute; right:8px;bottom:6px}

#slide_b .ico_b li{background:#fff;float:left;display:block; width:15px; height:15px; line-height:15px;border:1px solid #cecece;font-family:arial, helvetica, sans-serif;text-align:center;margin:2px; padding: 1px;cursor:pointer}

#slide_b .ico_b li.high_b{background:#a40000;color:#fff;font-weight:bolder}

/*sample-c*/

#slide_c { position:relative;width:700px; height:250px; overflow:hidden; border:1px solid #ccc; margin-top:20px; }

#slide_c img{width:700px; height:250px}

#slide_c .ico_c{position:absolute; right:8px;bottom:6px}

#slide_c .ico_c li{background:#fff;float:left;display:block; width:15px; height:15px; line-height:15px;border:1px solid #cecece;font-family:arial, helvetica, sans-serif;text-align:center;margin:2px; padding: 1px;cursor:pointer}

#slide_c .ico_c li.high{background:#000;color:#fff;font-weight:bolder}

jquery代码

/*******************************

* @jQuery实现可自动切换的幻灯片效果插件代码

* @jquery vesion:1.4.2

* @plugin page:http://mrthink.net/jq-plugin-ifadeslide/

* @author 3ppt.com

* @author blog http://www.3ppt.com/

* @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

});

});

html代码