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

发布时间：2018-08-23 18:30:59 所属栏目：传媒来源：站长网

导读：烈火网(LieHuo.Net)教程基于 jQuery 的幻灯插件:中等级封装类sGallery 1.0，非常漂亮，欢迎大家学习和转载，请注意保留作者的博客地址，尊重作者劳动成果！ !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DT

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

<!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为on changeTime: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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　作者：不羁虫

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!