javaScript + better-scroll 实现移动端轮播图效果

最新推荐文章于 2022-08-15 17:08:23 发布

xianshengwen

最新推荐文章于 2022-08-15 17:08:23 发布

阅读量840

点赞数 1

分类专栏： better-scroll 文章标签： javaScript + better-scroll 实现移动端轮播原生JS实现移动端轮播图效果原生JS实现轮播图 JS实现轮播图效果实现轮播图效果

本文链接：https://blog.csdn.net/weixin_44227577/article/details/101395315

版权

better-scroll 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

javaScript + better-scroll 实现移动端轮播图效果

该功能主要实现移动端轮播图的效果, 主要使用 javaScript + better-scroll 技术, 话不多说上代码, 保证简单已懂。

首先我们需要引入 better-scroll 这个插件

github: https://github.com/ustbhuangyi/better-scroll


	<script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>

第二步我们需要编写页面的 HTML


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./slider.css">
</head>

<body>
  <div class='home'>
    <div class="slider-wrapper">
      <h3 style="margin-top: 30px;">实现方案(javaScript + better-scroll)</h3>
      <div class="slider">
        <div class="slider-group">
          <div>
            <a href="">
              <img src="./img/swiper_1.jpg">
            </a>
          </div>
          <div>
            <a href="">
              <img src="./img/swiper_2.jpg">
            </a>
          </div>
          <div>
            <a href="">
              <img src="./img/swiper_3.jpg">
            </a>
          </div>
          <div>
            <a href="">
              <img src="./img/swiper_4.jpg">
            </a>
          </div>
          <div>
            <a href="">
              <img src="./img/swiper_5.jpg">
            </a>
          </div>
        </div>
        <!-- 翻页器 -->
        <div class="dots"></div>
      </div>

    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
  <script src="./slider.js"></script>
</body>
</html>

第三步我们需要编写页面的 CSS

`slider.css`


*{
  margin: 0;
  padding: 0;
}

.home {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
}

.slider-wrapper{
  position: relative;
}

.slider {
  min-height: 1px;

}

.slider-group {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.slider-item {
  float: left;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

.slider-item a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
}

.slider-item a img {
  width: 100%;
  display: block;
}

.dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 12px;
  text-align: center;
  font-size: 0;
}

.dot {
  display: inline-block;
  margin: 0 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

/* 翻页器选中的样式 */
.active {
  width: 20px;
  border-radius: 5px;
  background: #fff;
}

第四步我们需要编写页面的 JS

`slider.js`

代码中每一步都有注释讲解, 花一点心思应该很快就能明白每个方法的作用


window.onload = function () {
  // 是否自动轮博
  var autoPlay = false;
  // 是否无缝循环轮播
  var loop = true
  // 轮播的毫秒数
  var interval = 1000;
  // 定时器
  var timer = null;
  // 当前滚动的下标
  let currentPageIndex = 0;


  setTimeout(() => {
    // 设置 slider 的宽度
    _setSliderWidth();
    // 初始化控制器
    _initDots();
    // 初始化 slider
    _initSlider();
    // // 判断是否开启了循环轮播
    if (autoPlay) {
      _play();
    }
  }, 20);

  // 监听尺寸变化
  window.addEventListener("resize", () => { 
    if (!this.slider) {
      return;
    }
    _setSliderWidth(true);
    this.slider.refresh();
  });

  // 给指定元素添加 class
  function addClass(el, className) {
    if (hasClass(el, className)) { // 判断需要添加的类名是否存在
      return
    }
    // 先将变量转换成数组
    let newClass = el.className.split(' ');
    // 然后将类名添加到数组中
    newClass.push(className);
    // 将数组里面的值转换成字符串]
    el.className = newClass.join(' ');
  }


  // 给指定元素删除 class
  function removeClass(el, className) {
    if (hasClass(el, className)) {
      el.className = el.className.replace(new RegExp("(\\s|^)" + className + "(\\s|$)"), " "); // replace方法是替换 
    };
  };


  // 查询指定元素是否有相对于的 class
  function hasClass(el, className) {
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
    return reg.test(el.className);
  }


  let slider = document.getElementsByClassName('slider')[0];
  // 轮播图的容器
  let sliderGroup = document.getElementsByClassName('slider-group')[0];
  // 轮播图
  let sliderGroupChildren = sliderGroup.children;
  // 获取翻页器容器
  let dots = document.getElementsByClassName('dots')[0];
  // 设置翻页器的数量
  var dotsLen = new Array(sliderGroupChildren.length);

  // 设置 slider 的宽度
  function _setSliderWidth() {
    let width = 0;
    let sliderWidth = slider.clientWidth;
    for (let i = 0; i < sliderGroupChildren.length; i++) {
      let child = sliderGroupChildren[i];
      addClass(child, "slider-item");
      child.style.width = sliderWidth + "px";
      width += sliderWidth;
    }
    if (loop) { // 当设置无缝循环轮播的时候, 默认加两张图片的宽度方便滚动
      width += 2 * sliderWidth;
    }
    // 设置轮播图容器的宽度
    sliderGroup.style.width = width + "px";
  }

  // 初始化 slider
  function _initSlider() {
    this.slider = new BScroll(slider, {
      scrollX: true, // 滚动方向为 X 轴
      scrollY: false, // 滚动方向为 Y 轴
      momentum: false, // 当快速滑动时是否开启滑动惯性
      snap: {  // 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
        loop: loop, // 是否可以无缝循环轮播
        threshold: 0.3, // 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
        speed: 400 // 轮播图切换的动画时间
      },
      click: true // 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true
    });
    this.slider.on("scrollEnd", () => { // 滚动结束
      // 获取当前的页码
      let pageIndex = this.slider.getCurrentPage().pageX;
          currentPageIndex = pageIndex;
      for (let index = 0; index < dotsLen.length; index++) {
        if (currentPageIndex == index) {
          addClass(dots.children[currentPageIndex], 'active')
        } else {
          removeClass(dots.children[index], 'active')
        }
      }

      if (autoPlay) { // 条件成立自动轮播
        _play();
      }
    });
    // 滚动开始之前
    this.slider.on("beforeScrollStart", () => {
      if (autoPlay) {
        clearTimeout(timer);
      }
    });
  }

  // 初始化控制器
  function _initDots() {
    let cm = '';
    for (let index = 0; index < dotsLen.length; index++) {
      if (currentPageIndex == index) {
        cm = '<span class="dot active"></span>';
      } else {
        cm = '<span class="dot"></span>';
      }
      dots.innerHTML += cm;
    }
  }

  // 开始轮播
  function _play() {
    timer = setTimeout(() => {
      // 滚动到下一个页面
      this.slider.next();
    }, interval);
  }
}

最后就是运行的效果图了

在这里插入图片描述

xianshengwen

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaScript + better-scroll 实现移动端轮播图效果

javaScript + better-scroll 实现移动端轮播图效果该功能主要实现移动端轮播图的效果, 主要使用 javaScript + better-scroll 技术, 话不多说上代码, 保证简单已懂。首先我们需要引入 better-scroll 这个插件github: https://github.com/ustbhuangyi/better-scroll <scrip...
复制链接

扫一扫

专栏目录