常用参数

www.superslide2.com/param.html

引入库文件

jquery.SuperSlide.2.1.1.js

设置css样式：scss文件

@charset "utf-8";
body {
  margin: 0;
  padding: 0;
}

p {
  font-size: 32px;
  text-align: center;
}

//banner设置
.advertisement {
  margin: 20px auto;
  width: 500px;
  height: 200px;
  position: relative;
  text-align: center;
  .bd {
    ul {
      li {
        width: 100%;
        height: 200px;
        list-style: none;
      }
    }
  }

  .hd {
    display: inline-block;
    margin: 10px auto;

    ul {
      padding: 0;
      margin: 0;

      li {
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        color: white;
        overflow: hidden;
        margin: 0px 6px;
        /*// text-indent: -999px; 如果不想要看见页码，可以使用样式隐藏*/
        cursor: pointer;
        background-color: #4d555d;
        border-radius: 50%;
        position: relative;

        &.on {
          background-color: #eb5e23;
        }
      }
    }
  }
}

设置html(自动分页和自定义分页)

   <p>系统自动分页</p>
   <div class="advertisement advertisement1">
     <div class="bd">
       <ul>
         <li><img src="images/banner1.jpg"/></li>
         <li><img src="images/banner2.jpg"/></li>
         <li><img src="images/banner3.jpg"/></li>
       </ul>
     </div>
     <div class="hd">
       <ul></ul>
     </div>
   </div>
   
   <p>自定义分页</p>
   <div class="advertisement advertisement2">
     <div class="bd">
       <ul>
         <li><img src="images/banner1.jpg"/></li>
         <li><img src="images/banner2.jpg"/></li>
         <li><img src="images/banner3.jpg"/></li>
       </ul>
     </div>
     <div class="hd">
       <ul></ul>
     </div>
   </div>

初始化设置

<script type="text/javascript">
  $(function () {
    //系统系统分页
    $(".advertisement1").slide({
      titCell: ".hd ul",
      mainCell: ".bd ul",
      effect: "leftLoop",
      trigger: "click",
      autoPlay: false,
      easing: "easeInOutQuad",
      interTime: 6000,
      delayTime: 500,
      autoPage: true
    });

    //自定义设置分页选项
    var autoPage = '';
    var bdList = $('.advertisement2 .bd li');
    for (var i = 0; i < bdList.length; i++) {
      var obj = bdList[i];
      autoPage += '<li style="display: none">第' + (i + 1) + '页</li>';
    }
    $(".advertisement2").slide({
      titCell: ".hd ul",
      mainCell: ".bd ul",
      effect: "leftLoop", //left leftLoop right rightLoop fade fold
      trigger: "click",  //默认是mouseover
      autoPlay: false,
      easing: "easeInOutQuad",
      interTime: 6000,  //效果速度
      delayTime: 500,
      autoPage: autoPage
    });

    //根据bd中的数目条数，隐藏其余重复的数据li:lt(2)--获取前2个
    $('.advertisement2 .hd li:lt(' + bdList.length + ')').css('display', 'block');
  });
</script>

效果