jQuery带左右箭头的3D效果图片轮播
- 作者:我爱模版网
- 大小:0.642MB
- 点击次数:
- 发布时间:2014-02-14 14:09
特效介绍
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图片轮播