jQuery banner无缝拼接滚动

jQuery banner无缝拼接滚动
插件描述:jQuery banner无缝拼接滚动,可设置是否自动播放,调用方便

使用方法

载入JavaScript和CSS文件:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bannerList.js"></script>

CSS样式:

// 可自定义
body{background:#000;}
.banner{width:100%;height:450px;overflow:hidden;position:relative;}
.banner > ul{display:none;height:450px;position:absolute;top:0;left:0;}
.banner > ul > li {float:left;height:450px;}
.banner > ul > li > a{display:block;font-size:200px;text-align:center;line-height:450px;font-weight:bold;}
.left-btn,.right-btn{width:61px;height:61px;position:absolute;top:45%;right:30px;background:url(images/right-1.png);cursor:pointer;}
.left-btn{left:30px;background:url(images/left-1.png);}
.img-btn-list{width:100%;position:absolute;bottom:10px;left:0;text-align:center;}
.img-btn-list > span {display:inline-block;width:24px;height:24px;border-radius:12px;margin:0 5px;background:rgba(0,0,0,0.8);cursor:pointer;}
.img-btn-list > span.current{border:3px solid rgba(0,0,0,0.8);background:rgba(255,255,255,0.8);}

DOM结构:

<div class="banner">
  <ul>
    <li><a href="#"><img src="images/banner1.png" alt="" /></a></li>
    <li><a href="#"><img src="images/banner2.png" alt="" /></a></li>
    <li><a href="#"><img src="images/banner6.png" alt="" /></a></li>
    <li><a href="#"><img src="images/banner4.png" alt="" /></a></li>
  </ul>
  <div class="left-btn"></div>
  <div class="right-btn"></div>
  <div class="img-btn-list"></div>
</div>

JavaScript调用方式:

bannerListFn($(".banner"), $(".img-btn-list"), $(".left-btn"), $(".right-btn"), 2000, true);
/** 调用方法:
 传递参数方法如下:
 对象1:banner最大容器====================>必填
 对象2:banner按钮父容器============>必填
 对象3,4:banner左右按钮对象名===========>必填
 对象5:banner滚动时间==================>可选项, 默认为2000
 对象6:是否需要自动轮播需要==========>true:不需要,false:必填
*/