幻灯片/轮播

堆叠图片左右切换轮播图jQuery插件

创客主机


这是一款jquery堆叠图片左右切换轮播图插件。该轮播图插件可以将图片左右对齐堆叠在一起,并可以通过前后导航按钮来左右切换图片。

使用方法:

在页面中引入jquery、jQuery-easing.js和jQuery-jcImgScroll.js文件。

  1. <script type="text/jscript" src="js/jquery.min.js"></script>
  2. <script type="text/jscript" src="js/jQuery-easing.js"></script>
  3. <script type="text/jscript" src="js/jQuery-jcImgScroll.js"></script>

HTML结构:

该轮播图使用过一个无序列表作为HTML结构。

  1. <div id="demo" class="jcImgScroll">
  2.   <ul>
  3.     <li><a href="#" path="images/01.jpg"></a></li>
  4.     <li><a href="#" path="images/02.jpg"></a></li>
  5.     <li><a href="#" path="images/03.jpg"></a></li>
  6.     <li><a href="#" path="images/04.jpg"></a></li>
  7.     <li><a href="#" path="images/05.jpg"></a></li>
  8.     <li><a href="#" path="images/06.jpg"></a></li>
  9.     <li><a href="#" path="images/07.jpg"></a></li>
  10.     <li><a href="#" path="images/08.jpg"></a></li>
  11.     <li><a href="#" path="images/09.jpg"></a></li>
  12.   </ul>
  13. </div>

CSS样式:

为该轮播图添加下面的CSS样式。

  1. .jcImgScroll{position:relative;height:380px;margin:40px auto 0 auto;}
  2. .jcImgScroll li{border:1px solid #ccc;}
  3. .jcImgScroll li a{background:#fff;display:block;position:relative;z-index:99;}
  4. .jcImgScroll li.loading a{background:#fff url(img/loading.gif) no-repeat center center;} 
  5. .jcImgScroll li img,.jcImgScroll li,.jcImgScroll em,.jcImgScroll dl{display:none;border:0 none;}
  6. .jcImgScroll li img{width: 100%;height: 100%;}
  7. .jcImgScroll em.sPrev{background:url(images/arrow-left.png) no-repeat left center;}
  8. .jcImgScroll em.sNext{background:url(images/arrow-right.png) no-repeat right center;}
  9. .jcImgScroll dl dd{background:url(images/NumBtn.png) no-repeat 0 bottom;text-indent:-9em;}
  10. .jcImgScroll dl dd:hover,.jcImgScroll dl dd.curr{background-position:0 0;}

初始化插件:

在页面DOM元素加载完毕之后,通过下面的方法来初始化该轮播图插件。

  1. $(function(){
  2.     $("#demo").jcImgScroll({
  3.       arrow : {
  4.         width:45, 
  5.         height:400,
  6.         x:60,
  7.         y:0
  8.       },
  9.       width : 330, //设置图片宽度
  10.       height:469, //设置图片高度
  11.       imgtop:22,//每张图片的上下偏移量
  12.       imgleft:-10,//每张图片的左边偏移量
  13.       imgwidth:30,//每张图片的宽度偏移量
  14.       imgheight:44,//每张图片的高度偏移量
  15.       count : 9,
  16.       offsetX : 60,
  17.       NumBtn : false,
  18.       title:false,
  19.       setZoom:.8,
  20.     });
  21.   });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!