热搜词
基于jQuery的幻灯插件:中等级封装类sGallery 1.0
灰儿 管理员 发消息 加好友 打招呼
发表于 2012-11-4 11:48:39 | 显示全部楼层 |阅读模式
基于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下不透明，此和样式有关，请详知。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Language" content="zh-CN" />
  5. <title>基于jQuery的幻灯插件：中等级封装类sGallery 1.0 - liehuo.net</title>
  6. <link rel="stylesheet" type="text/css" media="all" href="" />
  7. <script type="text/javascript" src="/uploads/Common/jquery-1.3.2.min.js"></script>
  8. <script src="/uploads/Common/jquery.sGallery-min.js" type="text/javascript"></script>
  9. <style>
  10. /* base yui reset.css, repair by haven long 090925*/
  11. 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;}
  12. html{color:#000;background:#fff;}
  13. body{
  14. font-size:0.75em;
  15. background:#fff;
  16. font-family:Verdana, Tahoma,Arial,Helvetica, sans-serif;
  17. text-align:center;
  18. color:#444;
  19. }
  20. a{
  21. text-decoration:none;
  22. color:#444;
  23. }
  24. a:hover{color:#B70000;}
  25. /* end of reset.css */
  26. /*all base*/
  27. #wrapper{
  28. position:relative;
  29. width:990px;
  30. margin:0 auto;
  31. text-align:left;
  32. overflow:hidden;}
  33. h1{font-size:1.17em;text-align:center; margin:20px; }
  34. h1 .strong{color:#CC0000;margin-left:3px;font-size:1.3em;}
  35. .allIntro{
  36. border:1px solid #ccc;
  37. margin:10px 0;
  38. padding:15px;
  39. background:#eee;
  40. line-height:1.7em; }
  41. .p_other{
  42. font-size:1.17em;
  43. margin:20px 0 10px; }
  44. .p_author{
  45. font-size:1.17em;
  46. text-align:right;
  47. margin:0 10px 10px; }
  48. .p_author a{
  49. color:#cc0000;
  50. text-decoration:underline; }
  51. .p_author a:hover{text-decoration:none;}
  52. .eachBox{
  53. overflow:hidden;
  54. clear:both;
  55. padding:15px 0; }
  56. .introArea{
  57. float:left;
  58. margin-left:20px;
  59. display:inline;
  60. width:300px;
  61. line-height:1.7em; }
  62. .introArea h2{
  63. font-size:1.17em;
  64. padding:5px 0 10px;
  65. color:#CC0000;}
  66. .green{color:green;}
  67. .blue,code{
  68. font-size:1em;
  69. color:blue;
  70. font-family:Verdana;}
  71. /* scrollBox_a1 */
  72. .scrollBox_a1{
  73. float:left;
  74. width:650px;height:250px;
  75. padding:2px;
  76. position:relative;
  77. border:1px solid #aaa; }
  78. .scrollBox_a1 .a_bigImg img{
  79. position:absolute;
  80. top:2px;left:2px;
  81. display:none;}
  82. .changeDiv{
  83. position:absolute;
  84. top:2px;left:2px;
  85. display:none;}
  86. .changeDiv h3{
  87. position:absolute;
  88. left:0px;bottom:0;
  89. width:650px;
  90. height:30px;line-height:30px;
  91. background:#fff;
  92. filter:alpha(opacity=70);
  93. opacity:0.7;}
  94. .changeDiv h3 a{
  95. display:block;
  96. padding-left:15px;
  97. color:#FF6600;}
  98. /* ul_scroll_a1 */
  99. .ul_scroll_a1{
  100. position:absolute;
  101. right:1px; bottom:6px;
  102. padding-left:19px;
  103. overflow:hidden;}
  104. .ul_scroll_a1 li{
  105. float:left;
  106. margin-right:7px; }
  107. .ul_scroll_a1 img{ border:1px solid #ddd;}
  108. .ul_scroll_a1 img.now{border:1px solid #FF6600;}
  109. .a_last,.a_next{
  110. position:absolute;
  111. top:10px;
  112. width:16px;height:16px;
  113. background:url(/uploads/Common/images/bot.png) no-repeat;
  114. text-indent:-999em;overflow:hidden;}
  115. .a_last{right:30px;background-position:0 0;}
  116. .a_next{right:12px;background-position:100% 0;}
  117. /* ul_scroll_a2 */
  118. .ul_scroll_a2{
  119. position:absolute;
  120. right:5px; bottom:7px;
  121. padding-left:19px;
  122. overflow:hidden;
  123. }
  124. .ul_scroll_a2 li{
  125. display: -moz-inline-stack;
  126. display:inline-block;
  127. *display:inline;
  128. *zoom:1;}
  129. .ul_scroll_a2 span{
  130. display: -moz-inline-stack;
  131. display:inline-block;
  132. *display:inline;
  133. *zoom:1;
  134. font-size:0.8em;
  135. padding:0px 3px;
  136. margin-right:2px;
  137. border:1px solid #999;
  138. background:#fff;
  139. filter:alpha(opacity=85);
  140. opacity:0.85;
  141. cursor:hand;
  142. cursor:pointer;
  143. }
  144. .ul_scroll_a2 span.on{
  145. border:1px solid #CC0000;
  146. background:#FFFF9D;
  147. color:#CC0000;}
  148. </style>
  149. </head>
  150. <body>
  151. <div id="wrapper">
  152. <b>如不能正常显示，请按F5刷新！</b>
  153. <!-- 1 -->
  154. <div class="eachBox">
  155. <div class="scrollBox_a1" id="scroll_1">
  156. <a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
  157. <a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
  158. <a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
  159. <a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
  160. </div>
  161. <div class="introArea">
  162. <h2>//默认最简易模式</h2>
  163. <p class="p_code"><code>$('#scroll_1 .a_bigImg img').sGallery();</code></p>
  164. <p class="green">
  165. //最简易模式不带任何参数，即直接切换选择器选择的对象组，所有参数为默认：隔5秒自动切换，图片过渡效果持续1秒


  168. //源对象为自动切换的一个数组，即其本身，非其父包装元素

  170. //如要切换图片本身就以图片组为对象，

  172. //如要切换层就以层组为对象</p>
  173. </div>
  174. </div>
  175. <!-- 2 -->
  176. <div class="eachBox">
  177. <div class="scrollBox_a1" id="scroll_2">
  178. <a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
  179. <a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
  180. <a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
  181. <a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
  182. <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
  183. </div>
  184. <div class="introArea">
  185. <h2>//带前后按钮</h2>
  186. <p class="p_code">
  187. <code>$('#scroll_2 .a_bigImg img').sGallery({
  188. botLast:'#scroll_2 .a_last', <span class="green">// 按钮，上一个</span>

  190. botNext:'#scroll_2 .a_next' <span class="green">// 按钮，下一个</span>

  192. });</code></p>
  193. </div>
  194. </div>
  195. <!-- 3 -->
  196. <div class="eachBox">
  197. <div class="scrollBox_a1" id="scroll_3">
  198. <a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
  199. <a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
  200. <a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
  201. <a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
  202. <ul class="ul_scroll_a2">
  203. <li><span>1</span></li>
  204. <li><span>2</span></li>
  205. <li><span>3</span></li>
  206. <li><span>4</span></li>
  207. </ul>
  208. </div>
  209. <div class="introArea">
  210. <h2>//使用数字导航切换及自定义当前状态数字的class</h2>
  211. <p class="p_code">
  212. <code>$('#scroll_3 .a_bigImg img').sGallery({
  213. thumbObj:'#scroll_3 .ul_scroll_a2 span',
  214. <span class="green">//导航为数字形式，选择器指向包含数字的span对象</span>

  216. thumbNowClass:'on',
  217. <span class="green">//自定义导航对象当前class为on</span>

  219. changeTime:4000<span class="green">//自定义切换时间为4000ms</span>

  221. });</code></p>
  222. </div>
  223. </div>
  224. <!-- 32 -->
  225. <div class="eachBox">
  226. <div class="scrollBox_a1" id="scroll_32">
  227. <div class="changeDiv">
  228. <h3><a href="#">图片111111111说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
  229. <a href="#1"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a></div>
  230. <div class="changeDiv">
  231. <h3><a href="#">图片222222222说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
  232. <a href="#2"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a></div>
  233. <div class="changeDiv">
  234. <h3><a href="#">图片333333333说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
  235. <a href="#3"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a></div>
  236. <div class="changeDiv">
  237. <h3><a href="#">图片444444444说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
  238. <a href="#4"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a></div>
  239. <ul class="ul_scroll_a2">
  240. <li><span>1</span></li>
  241. <li><span>2</span></li>
  242. <li><span>3</span></li>
  243. <li><span>4</span></li>
  244. </ul>
  245. </div>
  246. <div class="introArea">
  247. <h2>//切换对象为其他，这里为包含图片和标题的层</h2>
  248. <p class="p_code">
  249. <code>$('#scroll_32 div.changeDiv').sGallery({
  250. <span class="green">对象指向层，层内包含图片及标题</span>

  252. thumbObj:'#scroll_32 .ul_scroll_a2 span',

  254. thumbNowClass:'on',

  256. });</code></p>
  257. </div>
  258. </div>
  259. <!-- 4 -->
  260. <div class="eachBox">
  261. <div class="scrollBox_a1" id="scroll_4">
  262. <a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
  263. <a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
  264. <a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
  265. <a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
  266. <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
  267. <ul class="ul_scroll_a1">
  268. <li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="" /></a></li>
  269. <li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="" /></a></li>
  270. <li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="" /></a></li>
  271. <li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="" /></a></li>
  272. </ul>
  273. </div>
  274. <div class="introArea">
  275. <h2>//带导航图标及按钮</h2>
  276. <p class="p_code">
  277. <code>$('#scroll_4 .a_bigImg img').sGallery({
  278. thumbObj:'#scroll_4 .ul_scroll_a1 img',
  279. <span class="green">//导航图标，选择器直接指向图标对象</span>

  281. botLast:'#scroll_4 .a_last',

  283. botNext:'#scroll_4 .a_next'

  285. });</code></p>
  286. </div>
  287. </div>
  288. <!-- 5 -->
  289. <div class="eachBox">
  290. <div class="scrollBox_a1" id="scroll_5">
  291. <a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
  292. <a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
  293. <a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
  294. <a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
  295. <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
  296. <ul class="ul_scroll_a1">
  297. <li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="" /></a></li>
  298. <li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="" /></a></li>
  299. <li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="" /></a></li>
  300. <li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="" /></a></li>
  301. </ul>
  302. </div>
  303. <div class="introArea">
  304. <h2>//不自动切换</h2>
  305. <p class="p_code">
  306. <code>$('#scroll_5 .a_bigImg img').sGallery({
  307. thumbObj:'#scroll_5 .ul_scroll_a1 img',
  308. <span class="green">//导航图标，选择器直接指向图标对象</span>

  310. botLast:'#scroll_5 .a_last',

  312. botNext:'#scroll_5 .a_next',

  314. autoChange:false<span class="green"> //自动切换为 false，默认为true </span>

  316. });</code></p>
  317. </div>
  318. </div>
  319. </div>
  320. <script type="text/javascript">
  321. $(function () {
  322. //源对象为自动切换的一个数组，即其本身，非其父包装元素
  323. //如要切换图片本身就以图片组为对象，
  324. //如要切换层就以层组为对象
  325. //默认最简易模式
  326. $('#scroll_1 .a_bigImg img').sGallery();
  327. //带前后按钮
  328. $('#scroll_2 .a_bigImg img').sGallery({
  329. botLast:'#scroll_2 .a_last',//按钮，上一个
  330. botNext:'#scroll_2 .a_next'//按钮，下一个
  331. });
  332. //数字导航切换及自定义当前数字的class
  333. $('#scroll_3 .a_bigImg img').sGallery({
  334. thumbObj:'#scroll_3 .ul_scroll_a2 span',
  335. thumbNowClass:'on',//自定义导航对象当前class为on
  336. changeTime:4000//自定义切换时间为4000ms
  337. });
  338. //切换对象为其他，这里为包含图片和标题的层
  339. $('#scroll_32 div.changeDiv').sGallery({//对象指向层，层内包含图片及标题
  340. thumbObj:'#scroll_32 .ul_scroll_a2 span',
  341. thumbNowClass:'on'//自定义导航对象当前class为on
  342. });
  343. //带导航图标及按钮
  344. $('#scroll_4 .a_bigImg img').sGallery({
  345. thumbObj:'#scroll_4 .ul_scroll_a1 img',//导航图标
  346. botLast:'#scroll_4 .a_last',
  347. botNext:'#scroll_4 .a_next'
  348. });
  349. //不自动切换
  350. $('#scroll_5 .a_bigImg img').sGallery({
  351. thumbObj:'#scroll_5 .ul_scroll_a1 img',
  352. botLast:'#scroll_5 .a_last',
  353. botNext:'#scroll_5 .a_next',
  354. autoChange:false//自动切换为 false，默认为true
  355. });
  356. });
  357. </script>
  358. </body>
  359. </html>
  360. <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
复制代码
演示：
http://www.veryhuo.com/a/view/11031.html
封装 的
回复

使用道具 举报

全部评论0
返回列表 发新帖
回复
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

发布新帖

本文内容不够精彩，我要自己发布

TA的新帖

QQ|Archiver|手机版|小黑屋|管理员之家 ( 苏ICP备2023053177号-2 )

GMT+8, 2025-1-16 04:59 , Processed in 0.184540 second(s), 26 queries .

Powered by Discuz! X3.5

Cpoyright © 2001-2025 Discuz! Team