【功能建议】希望自动滚动的全屏海报加入两个按钮，实现“上一页”，“下一页”的功能

[Junt62]

希望自动滚动的全屏海报加入两个按钮，实现“上一页”，“下一页”的功能

[JsaRut]

这个功能我也想了很久，但何苦自己的JS实在...

[jqtmviyu]

在main.js 211行左右, 也就是 setInterval 函数结束,

添加以下代码: 鼠标滑动超过50像素, 左滑下一张, 右划上一张, 为了效果比较好, 把上面定时器的8000即8秒改为15000即15比较好.

// 鼠标按住滑动事件
    $('.misty-banner-body').on('mousedown', function(event) {
      console.log(event);
      if (event.button === 0) { // 左键按下
        let startX = event.clientX;
        let endX;

        $(document).on('mousemove', moveHandler);
        $(document).on('mouseup', upHandler);

        function moveHandler(event) {
          endX = event.clientX;
        }

        function upHandler(event) {
          $(document).off('mousemove', moveHandler);
          $(document).off('mouseup', upHandler);

          if (endX !== undefined) {
            console.log("endX , startX",endX , startX);
            if (endX - startX >= 50) {
              index -= index == 0 ? -($(".misty-banner-item").length -1) : 1
            } else if (endX - startX <= -50) {
              index += index + 1 == $(".misty-banner-item").length ? -index : 1
            } else {
              return
            }
            $(".misty-banner-body").css("left", -(index * 100).toString() + "%")
            $(".misty-banner-item.active").removeClass("active")
            let id = $(".misty-banner-item").eq(index).addClass("active").attr("id")
            $(".misty-banner-logo.active").removeClass("active")
            $(`.misty-banner-logo[id=${id}]`).addClass("active")
          }
        }
      }
    });