jesonhu / seamless-scroll Goto Github PK

/**
 * 点击无缝轮播效果实现
 * @auther Jesonhu
 * @update 20180405
 * @desc 功能：
 *       1.无缝滚动
 *       2.点击频率限制
 */
;
(function ($) {
  $(function () {
    const $banner = $('#banner');
    const $imgUl = $('#banner .pic ul');
    const $imgLi = $('#banner .pic li');
    const imgWidth = $imgLi.width();
    const $tabLi = $('#banner .tab li');
    const tabLiLength = $tabLi.length;
    const $btnDiv = $('#banner .btn div');
    const FAST_HANDLER_TIME = 350;
    const DURATION = 3000;
    let index = 0;
    let prevHandlerTime = new Date();
    let autoPlayTimer = null;

    /**
     * 显示下一张图片
     */
    function showNextImg() {
      index++;
      $imgUl.animate({
        marginLeft: -imgWidth * (index + 1) + 'px'
      }, 300, function () {
        if (index >= tabLiLength) {
          index = 0;
          $imgUl.css({
            marginLeft: -imgWidth + 'px'
          });
          $tabLi.eq(index).addClass('on').siblings().removeClass('on');
        }
      });
      $tabLi.eq(index).addClass('on').siblings().removeClass('on');
    }

    /**
     * 轮播自动播放 
     */
    function autoPlay() {
      autoPlayTimer = setInterval(() => {
        showNextImg();
      }, DURATION);
    }
    autoPlay();

    /**
     * tab点击切换
     * @desc Tips: jQuery回调不能使用箭头函数, 如果使用箭头函数
     *       内部this指向#document。
     */
    $tabLi.on('click', function () {
      index = $(this).index();
      $tabLi.eq(index).addClass('on').siblings().removeClass('on');
      // FIXME: 这里采用css3 transform体验性会更好
      $imgUl.animate({
        marginLeft: -imgWidth * (index + 1) + 'px'
      }, 300);
    });

    /**
     * 左右按钮点击 
     */
    $btnDiv.on('click', function (e) {
      const clickIndex = $(this).index();
      const nowHandlerTime = new Date();
      if ((nowHandlerTime - prevHandlerTime) > FAST_HANDLER_TIME) {
        prevHandlerTime = new Date();

        // 点击了左按钮
        if (clickIndex === 0) {
          index--;
          $imgUl.animate({
            marginLeft: -imgWidth * (index + 1) + 'px'
          }, 300, function () {
            if (index < 0) {
              index = tabLiLength - 1;

              $imgUl.css({
                marginLeft: -imgWidth * (index + 1) + 'px'
              });
              // methods2
              // $imgUl.css({marginLeft: -imgWidth * tabLiLength + 'px'});

              $tabLi.eq(index).addClass('on').siblings().removeClass('on');
            }
          });
        } else {
          showNextImg();
        }
        $tabLi.eq(index).addClass('on').siblings().removeClass('on');
      }
    });

    /**
     * 鼠标悬浮到轮播区域 
     */
    $banner.on('mouseenter', function () {
      $btnDiv.parent().show();
      clearInterval(autoPlayTimer);
    });
    /**
     * 鼠标离开轮播区域 
     */
    $banner.on('mouseleave', function () {
      $btnDiv.parent().hide();
      autoPlay();
    });

  });
})(jQuery);