网页移动端轮播图HTML、CSS、JS代码全

转自：www.dongliqingdan.top/2022/12/31/…

<div id="banner-area">
    <div id="banners-img">
      <div class="img-area">
        <img src="./resourse/wei4.jpg" alt="轮播图" />
      </div>
      <div class="img-area">
        <img src="./resourse/wei1.jpg" alt="轮播图" />
      </div>
      <div class="img-area">
        <img src="./resourse/wei2.jpg" alt="轮播图" />
      </div>
      <div class="img-area">
        <img src="./resourse/wei5.jpg" alt="轮播图" />
      </div>
      <div class="img-area">
        <img src="./resourse/wei3.jpg" alt="轮播图" />
      </div>
    </div>

#banner-area {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 0.5rem;
    border-radius: 0.2rem;
    overflow: hidden;
  }
  #banner-area #banners-img {
    width: 500%;
    height: 100%;
  }
  #banner-area #banners-img .img-area {
    float: left;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
  #banner-area #banners-img .img-area img {
    width: 100%;
    height: 100%;
  }
  #banner-area #banner-nav {
    position: absolute;
    bottom: 0.3rem;
    right: 0.3rem;
    width: 1.5rem;
    height: 0.8rem;
    font-size: 0.3rem;
    line-height: 0.8rem;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.4rem;
  }

window.onload = () => {
    /**
     * 1. 定时器自动轮播
     * 2. 右下角的数字可以根据图片进行改变
     * 3. 手指滑动轮播图 touch事件 用css3控制轮播图的定位
     * 4. 自动吸附 ->滑动距离达不到一定的值
     * 5. 上一张/下一张  ->滑动距离超过了就上一张/下一张
     */
  
    var bannerArea = document.querySelector("#banner-area"); //轮播图区域盒子
    var width = bannerArea.offsetWidth; //轮播图区域宽度
    var bannerImg = bannerArea.querySelector("#banners-img"); //图片区域
    var imgCount = bannerImg.childElementCount;
    var bannerNav = document.querySelector("#banner-nav"); //数字指示
    //添加过渡方法
    var addTransition = () => {
      bannerImg.style.transition = "all 0.3s";
    };
  
    //清除过渡
    var removeTransition = () => {
      bannerImg.style.transition = "none";
    };
  
    //设置图片位置 x轴  transform改变图片横向位置
    var setTransform = (transitionX) => {
      console.log("tranX\t" + transitionX);
      bannerImg.style.transform = `translateX(${transitionX}px)`;
    };
    //第几张
    let index = 0;
  
    //自动轮播函数
    function autoPlay() {
      index++; //下一张
      addTransition();
      setTransform(-index * width); //计算移动到第几张
      if (index >= imgCount) {
        //重置
        index = 0;
        bannerImg.style.transform = `translateX(0px)`;
      }
      //更改指示
      setNav(index);
    }
    //自动轮播
    var timer = setInterval(() => {
      autoPlay();
    }, 2000);
  
    //数字导航
    function setNav(index) {
      bannerNav.innerHTML = `${index + 1}/${imgCount}`;
    }
  
    //滑动事件 ->touch
    var startX = 0; //触摸起始位置
    var moveX = 0; //滑动时x的位置
    var distanceX = 0; //滑动的距离
    var isMove = false; //是否滑动过
  
    //开始触摸
    bannerImg.addEventListener("touchstart", (e) => {
      clearInterval(timer); //停止运动
      // console.log(e);
      startX = e.touches[0].clientX; //记录X位置
    });
  
    //滑动中  轮播图要跟着动
    bannerImg.addEventListener("touchmove", (e) => {
      moveX = e.touches[0].clientX;
      distanceX = moveX - startX; //滑动的距离
      removeTransition(); //停止过渡
      setTransform(-index * width + distanceX); //跟着动
      isMove = true; //正在滑动
    });
  
    //滑动结束  吸附
    bannerImg.addEventListener("touchend", (e) => {
      //滑动距离要大于屏幕1/4
      if (isMove && Math.abs(distanceX) > width / 4) {
        //判断向左还是右
        if (distanceX > 0) {
          index--;
          console.log("向右滑", index);
        } else {
          index++;
          console.log("向左滑", index);
        }
      }
      //吸附效果
      addTransition();
      console.log(index);
      if (index >= imgCount) {
        //重置
        index = 0;
        bannerImg.style.transform = `translateX(0px)`;
      } else if (index < 0) {
        index = imgCount - 1;
        console.log("右滑,目前" + index);
      }
  
      setTransform(-index * width);
      //更改数字
      setNav(index);
  
      //重置
      startX = 0;
      moveX = 0;
      distanceX = 0;
      isMove = false;
      clearInterval(timer); //严谨 再清除一次定时器
      timer = setInterval(function () {
        autoPlay();
      }, 2000);
    });
  };