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

jQuery带左右箭头的3D效果图片轮播，兼容IE678，火狐和360等浏览器

1、将下面代码放入head标签

<style>
    <!-- /* jQuery jcImgScroll css */ .jcImgScroll { position:relative; height:342px;
    } .jcImgScroll li { border:1px solid #ccc; } .jcImgScroll li a { background:#fff;
    display:block; height:340px; } .jcImgScroll li.loading a { background:#fff
    url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll
    li,.jcImgScroll em,.jcImgScroll dl { display:none; border:0 none;} .jcImgScroll
    em.sPrev { background:url(images/arrow-left.png) no-repeat left center;
    } .jcImgScroll em.sNext { background:url(images/arrow-right.png) no-repeat
    right center;} .jcImgScroll dl dd { background:url(images/NumBtn.png) no-repeat
    0 bottom; text- indent:-9em; } .jcImgScroll dl dd:hover,.jcImgScroll dl
    dd.curr { background-position:0 0; } -->
</style>
<script src="js/jQuery-1.7.1.js" language="javascript" type="text/javascript">
</script>
<script src="js/jQuery-easing.js" language="javascript" type="text/javascript">
</script>
<script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
    < !--$(function() {
        $("#demo1").jcImgScroll({});
        $("#demo2").jcImgScroll({
            count: 7
        });
        $("#demo3").jcImgScroll({
            arrow: {
                width: 110,
                height: 342,
                x: 220,
                y: 0
            },
            count: 3,
            offsetX: 140,
            NumBtn: true,
            title: false
        });
    }); -->
</script>

2、将下面代码放入你想显示的地方

<div id="demo1" class="jcImgScroll">
    <ul>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/01.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/02.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/03.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/04.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/05.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/06.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank" path="images/07.jpg"
            title="我爱模版网 www.5imoban.net">
            </a>
        </li>
    </ul>
</div>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！