jq无缝轮播图

前端是一条很长的路，新入坑的小伙伴且行且珍惜。
刚学习js时轮播图是我们不可绕过的一个很经典的题目，虽然现在https://www.swiper.com.cn/做的很好，可以满足我们日常工作中绝大多数的工作，但是基本的实现还是需要我们理解的。一个小练习。

<style type="text/css">
  * {
       padding: 0;
       margin: 0;
    }
  html, body {
    height: 100%;
  }
  .bar {
    width: 400px;
    height: 200px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
  }
  .bar-box {
    position: absolute;
    left: 0;
    top: 0;
  }
  .bar .bar-son {
    width: 400px;
    height: 200px;
    float: left;
    text-align: center;
    line-height: 200px;
    color: #ffffff;
    background: #555555;
  }
  .bar-canble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .8);
    position: absolute;
    top: 40%;
    cursor: pointer;
  }
  .bar-l {
    left: 10px;
  }
  .bar-r {
    right: 10px;
  }
  /* 小圆点 */
  .dot {
    overflow: hidden;
    position: absolute;
    bottom: 10px;
    left: 34%;
    list-style: none;
  }
  .dot li {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    float: left;
    margin-right: 8px;
    cursor: pointer;
  }
  .dot .active {
    background-color: #F7DE1F;
  }
</style>
// html
<div class="bar">
    <div class="bar-box">
        <div class="bar-son">1</div>
        <div class="bar-son">2</div>
        <div class="bar-son">3</div>
        <div class="bar-son">4</div>
        <div class="bar-son">5</div>
        <div class="bar-son">6</div>
        </div>
    <div class="bar-l bar-canble"></div>
    <div class="bar-r bar-canble"></div>
    <ul class="dot">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script type="text/javascript">
  $(function() {
    var barBox = $('.bar-box'); // 获取盒子
    var barSon = $('.bar-son'); // 获取轮播元素
    var _index = 0; // 索引值
    var lock = true; // 锁，注：防止连续快速切换时出现的bug
    var barBoxWidth = barSon.length * barSon.width() + 400; // 盒子宽度
    barBox.css({ width: barBoxWidth }); // 设置盒子宽度
    // 向右按钮
    $('.bar-r').click(function() {
      if(lock) {
        // 点击后锁上锁子，防止快速点击
        lock = false;
        // 点击之前先清掉小圆点选中的样式
        $('.dot li').removeClass('active');
        _index++;
        if(_index == barSon.length) {
          // 最后一张时特殊处理，完成无缝衔接
          barBox.find('.bar-son:first').clone().appendTo(barBox); // 复制第一个插入到最后面去
          barBox.animate({
            left: -(_index * 400)
          }, function() {
            // 动画结束后重置left，并删除掉克隆的 barSon
            barBox.css({ left: 0 });
            barBox.find('.bar-son:last').remove();
            _index = 0;
            // 动画结束后解开锁子
            lock = true;
            // 小圆点跟随切换
            $('.dot li').eq(_index).addClass('active');
          });
        } else {
          // 正常情况下轮播逻辑
          barBox.animate({
            left: -(_index * 400)
          }, function() {
            lock = true;
            $('.dot li').eq(_index).addClass('active');
          });
        } 
      }
    });
    // 向左按钮
    $('.bar-l').click(function() {
      if(lock) {
        lock = false;
        $('.dot li').removeClass('active');
        _index--;
        // 第一张时特殊处理，完成无缝衔接
        if(_index == -1) {
          barBox.find('.bar-son:last').clone().prependTo(barBox);
          barBox.css({ left: -400 });
          barBox.animate({
            left: 0
          }, function() {
            _index = barSon.length - 1;
            barBox.css({ left: -(_index * 400) }); 
            barBox.find('.bar-son:first').remove();
            lock = true;
            $('.dot li').eq(_index).addClass('active');
          });
        } else {
          // 正常情况
          barBox.animate({
            left: -(_index * 400)
          }, function() {
            lock = true;
            $('.dot li').eq(_index).addClass('active');
          });
        } 
      }
    });
    // 按钮
    $('.dot li').click(function() {
      var that = $(this);
      if(lock) {
        lock = false;
        // 获取小圆点indedx( 下标 );
        _index = that.index();
        // 调整轮播位置
        barBox.animate({
          left: -(_index * 400)
        }, function() {
          lock = true;
        });
        // 切换选中的小圆点样式
        $('.dot li').removeClass('active');
        that.addClass('active');
      }
    });
  } 
</script>