• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  jQuery带左右箭头的3正文

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

作者:我爱模版网
大小:0.642MB
点击次数:
发布时间:2014-02-14 14:09
分享到:

特效介绍

带左右箭头的jquery图片轮播

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>

  • 本文标签:
  • jquery图片轮播,3D图片轮播
右侧带缩略图的JS幻灯
jQuery云端桌面满屏焦点图代码