仿神奇世界首页jquery手风琴广告轮播效果
- 作者:我爱模版网
- 大小:0.129MB
- 点击次数:
- 发布时间:2014-02-14 14:03
特效介绍
仿神奇世界首页jquery手风琴广告轮播效果。兼容各大浏览器。
使用方法
1、在头部引入相关js代码和css代码:01 | < script src = "http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type = "text/javascript" ></ script > |
02 | < script src = "js/jquery.kwicks-1.5.1.pack.js" type = "text/javascript" ></ script > |
03 | < script type = "text/javascript" > |
04 | $().ready(function() { |
05 | $('.kwicks').kwicks({ |
06 | max : 966, |
07 | spacing : 0 |
08 | }); |
09 | }); |
10 | </ script > |
11 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
12 | < style type = "text/css" > |
13 | .kwicks { |
14 | list-style: none; |
15 | position: relative; |
16 | margin: 0; |
17 | padding: 0; |
18 | } |
19 | .kwicks li{ |
20 | width: 322px; |
21 | height: 116px; |
22 | display: block; |
23 | overflow: hidden; |
24 | padding: 0; |
25 | } |
26 | .kwicks.horizontal li { |
27 | margin-right: 0px; |
28 | float: left; |
29 | } |
30 | .kwicks.vertical li{ |
31 | margin-bottom: 0px; |
32 | } |
33 | .kwicks.horizontal #kwick_4 { |
34 | margin-right: none; |
35 | } |
36 | .kwicks.vertical #kwick_4 { |
37 | margin-bottom: none; |
38 | } |
39 | #kwick_1 a:{ border:0px;} |
40 | </ style > |
2、把以下代码拷贝到你想引用的地方
01 | < ul class = "kwicks horizontal" style = "margin:0 auto" > |
02 | < li id = "kwick_1" > |
03 | < a href = "http://www.5imoban.net/" target = "_blank" title = "我爱模版仿神奇世界首页jquery手风琴广告轮播效果" > |
04 | < img src = "Images/a0404.jpg" width = "966" height = "116" alt = "我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border = "0" /> |
05 | </ a > |
06 | </ li > |
07 | < li id = "kwick_2" > |
08 | < a href = "http://www.5imoban.net" target = "_blank" title = "我爱模版仿神奇世界首页jquery手风琴广告轮播效果" > |
09 | < img src = "Images/a0202.jpg" width = "966" height = "116" alt = "我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border = "0" /> |
10 | </ a > |
11 | </ li > |
12 | < li id = "kwick_3" > |
13 | < a href = "http://www.5imoban.net" target = "_blank" title = "我爱模版仿神奇世界首页jquery手风琴广告轮播效果" > |
14 | < img src = "Images/a0303.jpg" width = "966" height = "116" alt = "我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border = "0" /> |
15 | </ a > |
16 | </ li > |
17 | </ ul > |
注:
1、.kwicks为你要实现此效果的类名,可以自定义。但是,在调用js函数的时候,一定注意修改:
1 | $('.kwicks').kwicks({ |
2 | max : 966, |
3 | spacing : 0 |
4 | }); |
2、参数说明:“max”为滚动图片滚动的范围,建议设置成外层ul的尺寸。“spacing”为滚动图片的间距,建议设置为0。如果不明白,可以自己尝试修改。
- 本文标签:
- 仿,神奇,世界,首页,jquery,手风琴,广告,轮播,仿,