首页 > 特效插件 > 滚动轮播 >  jQuery带左右箭头的3D效果图片轮播正文

jQuery带左右箭头的3D效果图片轮播

特效介绍

带左右箭头的jquery图片轮播

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>