如何使用jQuery创建左右滑动切换效果？(1)

📌 相关文章

📜 如何使用jQuery创建左右滑动切换效果？(1)

📅 最后修改于: 2023-12-03 15:38:07.058000 🧑 作者: Mango

如何使用jQuery创建左右滑动切换效果？

在应用中实现切换效果对用户体验非常重要, 下面我们将介绍如何使用jQuery创建左右滑动切换效果。

步骤一: 引入jQuery库和CSS样式

在标签中引入jQuery和CSS文件。

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

步骤二: 创建 HTML 结构

我们需要以一个容器作为整个切换效果的最外层，再在其中嵌套两个切换页面的容器。

<div class="slider">
  <div class="slider-container">
    /* 第一页内容 */
  </div>
  <div class="slider-container">
    /* 第二页内容 */
  </div>
</div>

步骤三: 创建 JavaScript 插件

创建一个 JavaScript 插件, 它将负责管理滑动效果。

(function ($) {
  $.fn.slider = function () {
    var $slider = $(this),
        $container = $slider.find('.slider-container'),
        len = $container.length,
        curIndex = 0, // 当前显示的页面索引
        locked = false;

    // 下一页
    function next() {
      if (locked) return;
      locked = true;
      curIndex++;
      if (curIndex >= len) {
        curIndex = 0;
      }
      $slider.addClass('slider-move')
             .find('.active').removeClass('active')
             .end().find($container[curIndex]).addClass('active');
      setTimeout(function () {
        $slider.removeClass('slider-move');
        locked = false;
      }, 600); // 切换动画时长：0.6秒
    }

    // 上一页
    function prev() {
      if (locked) return;
      locked = true;
      curIndex--;
      if (curIndex < 0) {
        curIndex = len - 1;
      }
      $slider.addClass('slider-move')
             .find('.active').removeClass('active')
             .end().find($container[curIndex]).addClass('active');
      setTimeout(function () {
        $slider.removeClass('slider-move');
        locked = false;
      }, 600); // 切换动画时长：0.6秒
    }

    // 绑定事件
    $slider.find('.btn-prev').on('click', function () {
      prev();
    });
    $slider.find('.btn-next').on('click', function () {
      next();
    });

  };
})(jQuery);

在上面插件的代码中, 通过 jQuery 插件的形式，将切换效果绑定到了 jQuery 对象上, 而在主体代码中只需调用即可轻松使用。

步骤四: 调用 JavaScript 插件

最后一步是调用插件，启动切换效果。在你的 JavaScript 文件中调用这个方法:

$(document).ready(function () {
  $('.slider').slider();
});

完整示例

HTML 代码:

<div class="slider">
  <div class="slider-container active">
      /* 第一页内容 */
  </div>
  <div class="slider-container">
      /* 第二页内容 */
  </div>
</div>

<button class="btn-prev">上一页</button>
<button class="btn-next">下一页</button>

CSS 代码:

.slider {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slider .slider-move {
  transition: transform 0.6s ease;
}

.slider .slider-container {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* 纵向滚动 */
  overflow-x: hidden; /* 横向不滚动 */
}

.slider .slider-container.active {
  transform: translateX(0);
}

.slider .slider-container:not(.active) {
  transform: translateX(100%);
}

.btn-prev, .btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.btn-prev {
  left: 0;
}

.btn-next {
  right: 0;
}

JS 代码:

(function ($) {
  $.fn.slider = function () {
    var $slider = $(this),
        $container = $slider.find('.slider-container'),
        len = $container.length,
        curIndex = 0, // 当前显示的页面索引
        locked = false;

    // 下一页
    function next() {
      if (locked) return;
      locked = true;
      curIndex++;
      if (curIndex >= len) {
        curIndex = 0;
      }
      $slider.addClass('slider-move')
             .find('.active').removeClass('active')
             .end().find($container[curIndex]).addClass('active');
      setTimeout(function () {
        $slider.removeClass('slider-move');
        locked = false;
      }, 600); // 切换动画时长：0.6秒
    }

    // 上一页
    function prev() {
      if (locked) return;
      locked = true;
      curIndex--;
      if (curIndex < 0) {
        curIndex = len - 1;
      }
      $slider.addClass('slider-move')
             .find('.active').removeClass('active')
             .end().find($container[curIndex]).addClass('active');
      setTimeout(function () {
        $slider.removeClass('slider-move');
        locked = false;
      }, 600); // 切换动画时长：0.6秒
    }

    // 绑定事件
    $slider.find('.btn-prev').on('click', function () {
      prev();
    });
    $slider.find('.btn-next').on('click', function () {
      next();
    });

  };
})(jQuery);

$(document).ready(function () {
  $('.slider').slider();
});

渲染效果如图所示:

效果图