特效介绍
jQuery带左右箭头的3D效果图片轮播,兼容IE678,火狐和360等浏览器
使用方法
1、将下面代码放入head标签
01 | < style > |
02 | <!-- /* jQuery jcImgScroll css */ .jcImgScroll { position:relative; height:342px; |
03 | } .jcImgScroll li { border:1px solid #ccc; } .jcImgScroll li a { background:#fff; |
04 | display:block; height:340px; } .jcImgScroll li.loading a { background:#fff |
05 | url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll |
06 | li,.jcImgScroll em,.jcImgScroll dl { display:none; border:0 none;} .jcImgScroll |
07 | em.sPrev { background:url(images/arrow-left.png) no-repeat left center; |
08 | } .jcImgScroll em.sNext { background:url(images/arrow-right.png) no-repeat |
09 | right center;} .jcImgScroll dl dd { background:url(images/NumBtn.png) no-repeat |
10 | 0 bottom; text- indent:-9em; } .jcImgScroll dl dd:hover,.jcImgScroll dl |
11 | dd.curr { background-position:0 0; } --> |
12 | </ style > |
13 | < script src = "js/jQuery-1.7.1.js" language = "javascript" type = "text/javascript" > |
14 | </ script > |
15 | < script src = "js/jQuery-easing.js" language = "javascript" type = "text/javascript" > |
16 | </ script > |
17 | < script src = "js/jQuery-jcImgScroll.js" language = "javascript" type = "text/javascript" > |
18 | </ script > |
19 | < script language = "javascript" type = "text/javascript" > |
20 | < !--$(function() { |
21 | $("#demo1").jcImgScroll({}); |
22 | $("#demo2").jcImgScroll({ |
23 | count: 7 |
24 | }); |
25 | $("#demo3").jcImgScroll({ |
26 | arrow: { |
27 | width: 110, |
28 | height: 342, |
29 | x: 220, |
30 | y: 0 |
31 | }, |
32 | count: 3, |
33 | offsetX: 140, |
34 | NumBtn: true, |
35 | title: false |
36 | }); |
37 | }); --> |
38 | </ script > |
2、将下面代码放入你想显示的地方
01 | < div id = "demo1" class = "jcImgScroll" > |
02 | < ul > |
03 | < li > |
04 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/01.jpg" |
05 | title = "我爱模版网 www.5imoban.net" > |
06 | </ a > |
07 | </ li > |
08 | < li > |
09 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/02.jpg" |
10 | title = "我爱模版网 www.5imoban.net" > |
11 | </ a > |
12 | </ li > |
13 | < li > |
14 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/03.jpg" |
15 | title = "我爱模版网 www.5imoban.net" > |
16 | </ a > |
17 | </ li > |
18 | < li > |
19 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/04.jpg" |
20 | title = "我爱模版网 www.5imoban.net" > |
21 | </ a > |
22 | </ li > |
23 | < li > |
24 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/05.jpg" |
25 | title = "我爱模版网 www.5imoban.net" > |
26 | </ a > |
27 | </ li > |
28 | < li > |
29 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/06.jpg" |
30 | title = "我爱模版网 www.5imoban.net" > |
31 | </ a > |
32 | </ li > |
33 | < li > |
34 | < a href = "http://www.5imoban.net/" target = "_blank" path = "images/07.jpg" |
35 | title = "我爱模版网 www.5imoban.net" > |
36 | </ a > |
37 | </ li > |
38 | </ ul > |
39 | </ div > |