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 = '<ul>';
max=imgfield.size();
//按图片传入对应的按钮
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(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');
});
}
实例完整代码
<style>
.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}
</style>
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 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 = '<ul>';
max=imgfield.size();
//按图片传入对应的按钮
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(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代码
<div id="demo">
<div class="box">
<!--sample-a-->
<div id="slide">
<img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" />
<div id="ico"></div>
</div>
<!--sample-a end-->
<!--sample-b-->
<div id="slide_b">
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" /></a>
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" /></a>
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" /></a>
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/f8bc38048259f10f07bb3fb06a5c8867dd2a4419_m.jpg" title="demo" alt="demo" /></a>
<div class="ico_b"></div>
</div>
<!--sample-b end-->
</div>
<!--sample-c-->
<div id="slide_c">
<img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/f8bc38048259f10f07bb3fb06a5c8867dd2a4419_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/cd8cdf92b2519c344d1e9849fbaf238f7c6b5d13_m.jpg" title="demo" alt="demo" />
<div class="ico_c"></div>
</div>
<!--sample-c end-->
</div>
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 = '<ul>';
max=imgfield.size();
//按图片传入对应的按钮
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(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');
});
}
实例完整代码
<style>
.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}
</style>
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 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 = '<ul>';
max=imgfield.size();
//按图片传入对应的按钮
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(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代码
<div id="demo">
<div class="box">
<!--sample-a-->
<div id="slide">
<img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" />
<div id="ico"></div>
</div>
<!--sample-a end-->
<!--sample-b-->
<div id="slide_b">
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" /></a>
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" /></a>
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" /></a>
<a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/f8bc38048259f10f07bb3fb06a5c8867dd2a4419_m.jpg" title="demo" alt="demo" /></a>
<div class="ico_b"></div>
</div>
<!--sample-b end-->
</div>
<!--sample-c-->
<div id="slide_c">
<img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/f8bc38048259f10f07bb3fb06a5c8867dd2a4419_m.jpg" title="demo" alt="demo" />
<img src="/static-data/assets/6/cd8cdf92b2519c344d1e9849fbaf238f7c6b5d13_m.jpg" title="demo" alt="demo" />
<div class="ico_c"></div>
</div>
<!--sample-c end-->
</div>
相关推荐
自动滚动的jQuery幻灯片播放图片效果代码 自动滚动的jQuery幻灯片播放图片效果代码 自动滚动的jQuery幻灯片播放图片效果代码
该特效一款jQuery仿途牛官方网站的全屏幻灯片焦点图代码特效,带左右箭头跟索引图标切换,是一款非常简单方便实用的网站大图轮播js图片插件。
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果...
插件描述:jquery 幻灯片以及tabs切换插件. 参考示例:http://www.jq22.com/jquery-info5338
一款比较实用的带左右箭头按钮控制的jquery slider图片插件,网站幻灯片焦点图片轮播切换代码下载。
jQuery图片切换插件图像幻灯片滑动切换 jQuery图片切换插件图像幻灯片滑动切换
一款基于Slippry.js插件实现的带左右箭头按钮控制与缩略图的图片切换特效,jQuery的幻灯片切换代码。 JS代码 [removed] </ script> [removed] </ script> [removed] var thumbs ...
jquery图标菜单点击宽屏幻灯片轮播切换插件
这是一款带有上下箭头控制,使用bootstrap的布局实现的幻灯片切换代码,jQuery图片垂直滑动切换幻灯片特效。
jquery全屏幻灯片插件点击小图弹出大图幻灯片切换代码 jquery全屏幻灯片插件点击小图弹出大图幻灯片切换代码 jquery全屏幻灯片插件点击小图弹出大图幻灯片切换代码
实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip 实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip 实现焦点图片切换html幻灯片展示效果的jQuery插件sudoSlider.zip
jquery幻灯片插件大小图片切换,兼容性好支持图片轮播切换
jQuery幻灯片图片切换插件Slippry
jQuery左右淡入淡出切换幻灯片是一款国产的jQuery幻灯片插件,它非常小巧,压缩后仅3KB。它支持淡入淡出,左右滚动,箭头,圆点控制,自动播放。
jquery幻灯片插件带马赛克滤镜图片切换效果 jquery幻灯片插件带马赛克滤镜图片切换效果 jquery幻灯片插件带马赛克滤镜图片切换效果
jquery.orbit图片幻灯片插件定时图片滑动切换代码
jQuery带视觉差效果幻灯片代码是一款基于flickity幻灯片插件来制作,通过切换背景图片层来实现视觉差效果。
一款基于flickity幻灯片插件来制作,通过切换背景图片层来实现的jQuery幻灯片视觉差效果代码。
这是一款效果炫酷的jQuery和CSS3翻页效果幻灯片插件。该翻页效果幻灯片在切换图片的时候图片就像书本翻页一样。可以设置为自动播放模式和手动播放模式。
jquery幻灯片插件图片层叠加按钮控制图片大小缩放切换