您当前位置：首页 > web前端 > jquery > 基于jQuery的幻灯插件:中等级封装类sGallery 1.0

基于jQuery的幻灯插件:中等级封装类sGallery 1.0

来源：程序员人生发布时间：2014-05-05 20:39:06 阅读次数：3768次

　　网(LieHuo.Net)教程基于jQuery的幻灯插件:中等级封装类sGallery 1.0，非常漂亮，欢迎大家学习和转载，请注意保留作者的博客地址，尊重作者劳动成果！

所有参数：

$(obj).sGallery({
    thumbObj:null, //导航对象，默认为空
    botLast:null, //按钮上一个，默认为空
    botNext:null, //按钮下一个。默认为空
    thumbNowClass:'now', //导航对象当前的class,默认为now
    slideTime:1000, //对象平滑过渡持续时间，默认为1000ms
    autoChange:true, //是否自动切换，默认为true
    changeTime:5000, //对象自动切换时间，默认为5000ms，即5秒
    delayTime:300 //鼠标经过时反应的延迟时间，推荐值为300ms
});

以上为此插件所有参数，从前端开发角度出发，充分利用css样式的灵活性，脚本调用方式简单，
基本满足了现在常见开发中遇到的平滑过渡效果，具体实际应用及代码参考以下的例子。

注：此插件大小为3k(min版为2k)，兼容全部主流浏览器，
图片右上方的小箭头图标考虑美观用了透明的png图片，在ie6下不透明，此和样式有关，请详知。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Language" content="zh-CN" /><title>基于jQuery的幻灯插件：中等级封装类sGallery 1.0 - liehuo.net</title><link rel="stylesheet" type="text/css" media="all" href="" /><script type="text/javascript" src="/uploads/Common/jquery-1.3.2.min.js"></script><script src="/uploads/Common/jquery.sGallery-min.js" type="text/javascript"></script><style>/* base yui reset.css, repair by haven long 090925*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;}table{border-collapse:collapse;border-spacing:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}ins{text-decoration:none;}del{text-decoration:line-through;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}.clear{height:0;font-size:0;line-height:0;clear:both;}html{color:#000;background:#fff;}body{font-size:0.75em;background:#fff;font-family:Verdana, Tahoma,Arial,Helvetica, sans-serif;text-align:center;color:#444;}a{text-decoration:none;color:#444;}a:hover{color:#B70000;}/* end of reset.css *//*all base*/#wrapper{position:relative;width:990px;margin:0 auto;text-align:left;overflow:hidden;}h1{font-size:1.17em;text-align:center; margin:20px; }h1 .strong{color:#CC0000;margin-left:3px;font-size:1.3em;}.allIntro{border:1px solid #ccc;margin:10px 0;padding:15px;background:#eee;line-height:1.7em; }.p_other{font-size:1.17em;margin:20px 0 10px; }.p_author{font-size:1.17em;text-align:right;margin:0 10px 10px; }.p_author a{color:#cc0000;text-decoration:underline; }.p_author a:hover{text-decoration:none;}.eachBox{overflow:hidden;clear:both;padding:15px 0; }.introArea{float:left;margin-left:20px;display:inline;width:300px;line-height:1.7em; }.introArea h2{font-size:1.17em;padding:5px 0 10px;color:#CC0000;}.green{color:green;}.blue,code{font-size:1em;color:blue;font-family:Verdana;}/* scrollBox_a1 */.scrollBox_a1{float:left;width:650px;height:250px;padding:2px;position:relative;border:1px solid #aaa; }.scrollBox_a1 .a_bigImg img{position:absolute;top:2px;left:2px;display:none;}.changeDiv{position:absolute;top:2px;left:2px;display:none;}.changeDiv h3{position:absolute;left:0px;bottom:0;width:650px;height:30px;line-height:30px;background:#fff;filter:alpha(opacity=70);opacity:0.7;}.changeDiv h3 a{display:block;padding-left:15px;color:#FF6600;}/* ul_scroll_a1 */.ul_scroll_a1{position:absolute;right:1px; bottom:6px;padding-left:19px;overflow:hidden;}.ul_scroll_a1 li{float:left;margin-right:7px; }.ul_scroll_a1 img{ border:1px solid #ddd;}.ul_scroll_a1 img.now{border:1px solid #FF6600;}.a_last,.a_next{position:absolute;top:10px;width:16px;height:16px;background:url(/uploads/Common/images/bot.png) no-repeat;text-indent:-999em;overflow:hidden;}.a_last{right:30px;background-position:0 0;}.a_next{right:12px;background-position:100% 0;}/* ul_scroll_a2 */.ul_scroll_a2{position:absolute;right:5px; bottom:7px;padding-left:19px;overflow:hidden;}.ul_scroll_a2 li{display: -moz-inline-stack;display:inline-block;*display:inline;*zoom:1;}.ul_scroll_a2 span{display: -moz-inline-stack;display:inline-block;*display:inline;*zoom:1;font-size:0.8em;padding:0px 3px;margin-right:2px;border:1px solid #999;background:#fff;filter:alpha(opacity=85);opacity:0.85;cursor:hand;cursor:pointer;}.ul_scroll_a2 span.on{border:1px solid #CC0000;background:#FFFF9D;color:#CC0000;}</style></head><body><div id="wrapper"><b>如不能正常显示，请按F5刷新！</b><div class="eachBox"><div class="scrollBox_a1" id="scroll_1"><a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a><a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a><a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a><a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a></div><div class="introArea"><h2>//默认最简易模式</h2><p class="p_code"><code>$('#scroll_1 .a_bigImg img').sGallery();</code></p><p class="green">//最简易模式不带任何参数，即直接切换选择器选择的对象组，所有参数为默认：隔5秒自动切换，图片过渡效果持续1秒 <br /> <br />//源对象为自动切换的一个数组，即其本身，非其父包装元素 <br />//如要切换图片本身就以图片组为对象，<br />//如要切换层就以层组为对象</p></div></div><div class="eachBox"><div class="scrollBox_a1" id="scroll_2"><a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a><a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a><a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a><a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a><a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a></div><div class="introArea"><h2>//带前后按钮</h2><p class="p_code"><code>$('#scroll_2 .a_bigImg img').sGallery({botLast:'#scroll_2 .a_last', <span class="green">// 按钮，上一个</span> <br />botNext:'#scroll_2 .a_next' <span class="green">// 按钮，下一个</span> <br />});</code></p></div></div><div class="eachBox"><div class="scrollBox_a1" id="scroll_3"><a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a><a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a><a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a><a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a><ul class="ul_scroll_a2"><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li></ul></div><div class="introArea"><h2>//使用数字导航切换及自定义当前状态数字的class</h2><p class="p_code"><code>$('#scroll_3 .a_bigImg img').sGallery({thumbObj:'#scroll_3 .ul_scroll_a2 span', <br /><span class="green">//导航为数字形式，选择器指向包含数字的span对象</span> <br />thumbNowClass:'on', <br /><span class="green">//自定义导航对象当前class为on</span> <br />changeTime:4000<span class="green">//自定义切换时间为4000ms</span> <br />});</code></p></div></div><div class="eachBox"><div class="scrollBox_a1" id="scroll_32"><div class="changeDiv"><h3><a href="#">图片111111111说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3><a href="#1"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a></div><div class="changeDiv"><h3><a href="#">图片222222222说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3><a href="#2"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a></div><div class="changeDiv"><h3><a href="#">图片333333333说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3><a href="#3"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a></div><div class="changeDiv"><h3><a href="#">图片444444444说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3><a href="#4"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a></div><ul class="ul_scroll_a2"><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li></ul></div><div class="introArea"><h2>//切换对象为其他，这里为包含图片和标题的层</h2><p class="p_code"><code>$('#scroll_32 div.changeDiv').sGallery({<br /><span class="green">对象指向层，层内包含图片及标题</span><br />thumbObj:'#scroll_32 .ul_scroll_a2 span', <br />thumbNowClass:'on', <br />});</code></p></div></div><div class="eachBox"><div class="scrollBox_a1" id="scroll_4"><a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a><a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a><a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a><a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a><a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a><ul class="ul_scroll_a1"><li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="" /></a></li><li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="" /></a></li><li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="" /></a></li><li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="" /></a></li></ul></div><div class="introArea"><h2>//带导航图标及按钮</h2><p class="p_code"><code>$('#scroll_4 .a_bigImg img').sGallery({thumbObj:'#scroll_4 .ul_scroll_a1 img', <br /><span class="green">//导航图标，选择器直接指向图标对象</span> <br />botLast:'#scroll_4 .a_last', <br />botNext:'#scroll_4 .a_next'<br />});</code></p></div></div><div class="eachBox"><div class="scrollBox_a1" id="scroll_5"><a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a><a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a><a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a><a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a><a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a><ul class="ul_scroll_a1"><li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="" /></a></li><li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="" /></a></li><li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="" /></a></li><li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="" /></a></li></ul></div><div class="introArea"><h2>//不自动切换</h2><p class="p_code"><code>$('#scroll_5 .a_bigImg img').sGallery({thumbObj:'#scroll_5 .ul_scroll_a1 img', <br /><span class="green">//导航图标，选择器直接指向图标对象</span><br />botLast:'#scroll_5 .a_last', <br />botNext:'#scroll_5 .a_next', <br />autoChange:false<span class="green"> //自动切换为 false，默认为true </span> <br />});</code></p></div></div></div><script type="text/javascript">$(function () {//源对象为自动切换的一个数组，即其本身，非其父包装元素//如要切换图片本身就以图片组为对象，//如要切换层就以层组为对象//默认最简易模式$('#scroll_1 .a_bigImg img').sGallery();//带前后按钮$('#scroll_2 .a_bigImg img').sGallery({botLast:'#scroll_2 .a_last',//按钮，上一个botNext:'#scroll_2 .a_next'//按钮，下一个});//数字导航切换及自定义当前数字的class$('#scroll_3 .a_bigImg img').sGallery({thumbObj:'#scroll_3 .ul_scroll_a2 span',thumbNowClass:'on',//自定义导航对象当前class为onchangeTime:4000//自定义切换时间为4000ms});//切换对象为其他，这里为包含图片和标题的层$('#scroll_32 div.changeDiv').sGallery({//对象指向层，层内包含图片及标题thumbObj:'#scroll_32 .ul_scroll_a2 span',thumbNowClass:'on'//自定义导航对象当前class为on});//带导航图标及按钮$('#scroll_4 .a_bigImg img').sGallery({thumbObj:'#scroll_4 .ul_scroll_a1 img',//导航图标botLast:'#scroll_4 .a_last',botNext:'#scroll_4 .a_next'});//不自动切换$('#scroll_5 .a_bigImg img').sGallery({thumbObj:'#scroll_5 .ul_scroll_a1 img',botLast:'#scroll_5 .a_last',botNext:'#scroll_5 .a_next',autoChange:false//自动切换为 false，默认为true});});</script></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

　　作者：不羁虫

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 实用简单的HTML转UBB脚本工具代码

下一篇 取得磁碟机之Volumn及Serial Number

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点