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();
  }
})

以上关于jQuery无缝轮播方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。