您當前位置：首頁 > web前端 > jquery > 基于jQuery的幻燈插件:中等級封裝類sGallery 1.0

基于jQuery的幻燈插件:中等級封裝類sGallery 1.0

來源：程序員人生發布時間：2014-05-05 20:39:06 閱讀次數：3959次

　　網(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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

　　作者：不羈蟲

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 實用簡單的HTML轉UBB腳本工具代碼

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

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

基于jQuery的幻燈插件:中等級封裝類sGallery 1.0