jQuery无缝轮播方法

jQuery 无缝轮播方法

简单,好用,功能较全,流畅,无 BUG jQuery 无缝轮播代码

HTML 代码

  <div class="all"> 
   <div class="screen"> 
    <div class="ul"> 
     <img src="images/01.png" alt="" /> 
     <img src="images/02.png" alt="" /> 
     <img src="images/03.png" alt="" /> 
     <img src="images/04.png" alt="" /> 
     <img src="images/05.png" alt="" /> 
    </div> 
    <ol> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
    </ol> 
    <div class="arr"> 
     <span class="left">&lt;</span> 
     <span class="right">&gt;</span> 
    </div> 
   </div> 
  </div>

CSS 代码

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.all {
    width: 900px;
    height: 500px;
    padding: 7px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
}
/*这三个最重要*/
.screen {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.screen img {
    width: 900px;
    height: 500px;
    float: left;
}

.screen .ul {
    position: absolute;
    left: 0;
}

.all ol {
    position: absolute;
    right: 10px;
    bottom: 10px;
    line-height: 20px;
    text-align: center;
}

.all ol li {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: 10px;
    cursor: pointer;
}

.all ol li.active {
    background-color: orange;
    color: #fff;
}

.arr span {
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,.3);
    position: absolute;
    top: 50%;
    margin-top: -20px;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: "黑体";
    font-size: 30px;
    color: #fff;
    border: 1px solid #fff;
    left: 5px;
    transition: all .3s;
    opacity: .5;
}

.arr .right {
    right: 5px;
    left: auto;
}

.arr span:hover {
    background-color: rgba(0,0,0,.5);
    opacity: 1;
}

JS 代码

$(function() {
  aRound({ //调用
    ulCss: ".ul",
    //必填:长滚轮 css
    butsCss: "ol li",
    //选填:小点 css
    actiClass: "active",
    //选填:高亮小点 class
    butOn: "mouseenter",
    //选填:小点翻页的事件 click/mouseenter(默认)
    wiLeCss: ".left",
    //选填:左翻页按钮 css
    wiRiCss: ".right" //选填:右翻页按钮 css
  },
  4000
  /*轮播频率*/
  );

  function aRound(bannCss, tiam = 3000) { //jqery 无缝轮播
    //1.准备工作
    var this_ = this,
    axle = null,
    give = true,
    //动画状态
    timFlg = false,
    //定时器状态
    index = 0,
    ul = $(bannCss.ulCss),
    length = ul.children().length,
    width = ul.children(":first").width(),
    buts,
    active,
    winLe,
    winRi,
    butsOn;
    ul.css({
      width: (length + 1) * width
    }).children(":first").clone().appendTo(".ul");

    //2.功能添加
    function axleYes() { //开定时器
      if (!timFlg) {
        axle = setInterval(drum, tiam);
        timFlg = true;
      }
    };

    function axleNo() { //关定时器
      clearInterval(axle);
      timFlg = false;
    };
    ul.parent().hover(function() { //hover
      axleNo();
    },
    function() {
      axleYes();
    });

    function gabby(posi) { //点亮该索引的小点 到达该索引的位置
      give = false;
      var giAb = Math.abs(posi);
      if (buts) {
        buts.eq(index == length ? 0 : false || giAb).addClass(active).siblings().removeClass(active);
      }
      ul.stop().animate({
        left: width * posi
      },
      function() {
        give = true;
      });
      index = giAb;
    }

    function drum() { //走一格
      index++;
      if (index > length) {
        ul.css({
          left: 0
        });
        index = 1;
      }
      gabby( - index);
    }

    //3.附加项
    if (bannCss.butsCss) {
      buts = $(bannCss.butsCss);
      active = bannCss.actiClass ? bannCss.actiClass: null;
      buts.first().addClass(active).siblings().removeClass(active);
      butsOn = bannCss.butOn ? bannCss.butOn: "mouseenter";
      buts.on(butsOn,
      function() {
        if (index == length && $(this).index() == 0) { //特殊状况
          ul.stop().animate({
            left: -width * length
          },
          120,
          function() {
            ul.css({
              left: 0
            });
            index = 0;
          });
          return;
        }
        gabby( - $(this).index());
      });
    }
    if (bannCss.wiLeCss && bannCss.wiRiCss) {
      $(bannCss.wiRiCss).click(function() {
        if (give) {
          drum();
        }
      });
      $(bannCss.wiLeCss).click(function() {
        if (give) {
          index--;
          if (index == -1) {
            ul.css({
              left: -width * length
            });
            index = length - 1;
          }
          gabby( - index);
        }
      });
    }
    axleYes();
  }
})

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jQuery无缝轮播方法

发表回复