JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)

最新推荐文章于 2024-04-30 16:57:21 发布

别让我头发掉光

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/lmx20010720lmx/article/details/128329516

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML代码

<div class="box">
    <!-- ul就相当于我装图片的盒子 -->
    <ul class="box_ul">
      <li class="box_li">
        <img src="images/messi3.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi1.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi2.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi3.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi1.jpg" alt="">
      </li>
    </ul>
    <!-- 左右两边按钮 -->
    <div class="left">
      <a href="#">
        <span>
          < </span>
      </a>
    </div>
    <div class="right">
      <a href="#">
        <span>
          > </span>
      </a>
    </div>
    <!-- 小圆点 -->
    <ul class="yuandian">
      <li class="point current"></li>
      <li class="point"></li>
      <li class="point"></li>
    </ul>
  </div>

CSS代码

<style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    li {
      list-style: none;
    }

    .box {
      position: relative;
      width: 800px;
      height: 400px;
      margin: 0 auto;
      overflow: hidden;
    }

    .box_ul {
      position: absolute;
      top: 0px;
      left: -800px;
      width: 4000px;
      height: 400px;
      transform: translateX(0px);
    }

    .box_ul img {
      width: 800px;
      height: 400px;
    }

    .box_ul .box_li {
      float: left;
    }

    /* 左边箭头的样式 */
    .box .left {
      width: 60px;
      height: 100px;
      background-color: grey;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      left: 1px;
      text-align: center;
      line-height: 100px;
    }

    .box .right {
      width: 60px;
      height: 100px;
      background-color: grey;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      left: 741px;
      text-align: center;
      line-height: 100px;
    }

    .box a {
      display: inline-block;
      width: 60px;
      height: 100px;
    }

    /* 小圆点样式 */
    .yuandian {
      width: 60px;
      height: 16px;
      position: absolute;
      top: 375px;
      left: 50%;
      margin-left: -30px;
    }

    .yuandian li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;
      border-color: slategray;
      float: left;
      margin-right: 5px;
    }

    .current {
      background-color: white;
    }
  </style>

JS代码

<script>
  //获取元素
  var yuandian = document.querySelector('.yuandian')//装小圆点的盒子
  var point = document.querySelectorAll('.point');//小圆点
  var boxLi = document.querySelectorAll('.box_li');//图片
  var boxUl = document.querySelector('.box_ul');//装图片的盒子
  var right = document.querySelector('.right');//右边按钮
  var left = document.querySelector('.left');//左边按钮
  var num = 0;//num记录我点击按钮的次数
  var circle = 0;//circle来记录小圆点的位置
  //让所有的小圆点都添加上点击事件
  for (var i = 0; i < point.length; i++) {
    //自定义属性
    point[i].setAttribute('index', i);
    //给小圆点添加上点击事件
    point[i].onclick = function () {
      //使用排它思想
      //第一步：干掉所有人
      for (var i = 0; i < point.length; i++) {
        point[i].className = 'point';
      }
      this.className = 'point current';
      var index = this.getAttribute('index');
      //将小圆点的自定义属性值传给num
      num = index;
      //将小圆点的自定义属性传给circle
      circle = index;
      //算法:自定义属性的值 * -盒子的宽度
      //'translateX(index*-800px)';
      boxUl.style.transform = 'translateX(' + index * -800 + 'px)';
    }
  }
  //右边按钮点击事件
  right.onclick = function () {
    //为什么要num++,因为num 进来的时候是0，如果是0第一次点击按钮的时候，位置不会动，所以需要++
    num++;
    boxUl.style.transition = 'transform 0.5s linear 0s';
    boxUl.style.transform = 'translateX(' + num * -800 + 'px)';
    //需要使用到无缝滚动技术(轮播图)
    if (num == boxLi.length - 2) {
      num = 0;
      setTimeout(() => {
        boxUl.style.transform = 'translateX(' + num * -800 + 'px)';
        boxUl.style.transition = 'none';
      }, 500);//时间需要跟过渡的时间匹配
    }
    //小圆点跟随我点击右边按钮的位置进行变化
    circle++;
    if (circle == boxLi.length - 2) {
      circle = 0;
    }
    //小圆点跟随排他思想
    for (var i = 0; i < point.length; i++) {
      point[i].className = 'point';
    }
    point[circle].className = 'point current';
  }

  //左边按钮点击事件
  left.onclick = function () {
    boxUl.style.transition = 'transform 0.5s linear 0s';
    if (num == 0) {
      num++;
      boxUl.style.transform = 'translateX(' + num * 800 + 'px)';
      setTimeout(() => {
        //为什么要-3，因为多加了一张图,length变成5
        num = boxLi.length - 3;
        boxUl.style.transition = 'none';
        boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';
      }, 500);//时间需要跟过渡的时间匹配
    } else {
      num--;
      boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';
    }
    //小圆点跟随我点击左边按钮的位置进行变化
    if (circle == 0) {
      circle = boxLi.length - 2;
    }
    circle--;
    //小圆点跟随排他思想
    for (var i = 0; i < point.length; i++) {
      point[i].className = 'point';
    }
    point[circle].className = 'point current';
  }
  //自动播放轮播图
  //鼠标移入事件
  boxUl.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  right.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  left.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  yuandian.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  //鼠标移出事件
  boxUl.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  right.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  left.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  yuandian.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  //使用定时器自动播放(setInterval())
  var timer = setInterval(function () {
    //手动调用点击事件
    right.onclick();
  }, 2000);//2000代表2秒钟点击一次
</script>

最后源码附上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS+CSS+HTML实现轮播图案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    li {
      list-style: none;
    }

    .box {
      position: relative;
      width: 800px;
      height: 400px;
      margin: 0 auto;
      overflow: hidden;
    }

    .box_ul {
      position: absolute;
      top: 0px;
      left: -800px;
      width: 4000px;
      height: 400px;
      transform: translateX(0px);
    }

    .box_ul img {
      width: 800px;
      height: 400px;
    }

    .box_ul .box_li {
      float: left;
    }

    /* 左边箭头的样式 */
    .box .left {
      width: 60px;
      height: 100px;
      background-color: grey;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      left: 1px;
      text-align: center;
      line-height: 100px;
    }

    .box .right {
      width: 60px;
      height: 100px;
      background-color: grey;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      left: 741px;
      text-align: center;
      line-height: 100px;
    }

    .box a {
      display: inline-block;
      width: 60px;
      height: 100px;
    }

    /* 小圆点样式 */
    .yuandian {
      width: 60px;
      height: 16px;
      position: absolute;
      top: 375px;
      left: 50%;
      margin-left: -30px;
    }

    .yuandian li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;
      border-color: slategray;
      float: left;
      margin-right: 5px;
    }

    .current {
      background-color: white;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- ul就相当于我装图片的盒子 -->
    <ul class="box_ul">
      <li class="box_li">
        <img src="images/messi3.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi1.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi2.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi3.jpg" alt="">
      </li>
      <li class="box_li">
        <img src="images/messi1.jpg" alt="">
      </li>
    </ul>
    <!-- 左右两边按钮 -->
    <div class="left">
      <a href="#">
        <span>
          < </span>
      </a>
    </div>
    <div class="right">
      <a href="#">
        <span>
          > </span>
      </a>
    </div>
    <!-- 小圆点 -->
    <ul class="yuandian">
      <li class="point current"></li>
      <li class="point"></li>
      <li class="point"></li>
    </ul>
  </div>
</body>

</html>
<script>
  //获取元素
  var yuandian = document.querySelector('.yuandian')//装小圆点的盒子
  var point = document.querySelectorAll('.point');//小圆点
  var boxLi = document.querySelectorAll('.box_li');//图片
  var boxUl = document.querySelector('.box_ul');//装图片的盒子
  var right = document.querySelector('.right');//右边按钮
  var left = document.querySelector('.left');//左边按钮
  var num = 0;//num记录我点击按钮的次数
  var circle = 0;//circle来记录小圆点的位置
  //让所有的小圆点都添加上点击事件
  for (var i = 0; i < point.length; i++) {
    //自定义属性
    point[i].setAttribute('index', i);
    //给小圆点添加上点击事件
    point[i].onclick = function () {
      //使用排它思想
      //第一步：干掉所有人
      for (var i = 0; i < point.length; i++) {
        point[i].className = 'point';
      }
      this.className = 'point current';
      var index = this.getAttribute('index');
      //将小圆点的自定义属性值传给num
      num = index;
      //将小圆点的自定义属性传给circle
      circle = index;
      //算法:自定义属性的值 * -盒子的宽度
      //'translateX(index*-800px)';
      boxUl.style.transform = 'translateX(' + index * -800 + 'px)';
    }
  }
  //右边按钮点击事件
  right.onclick = function () {
    //为什么要num++,因为num 进来的时候是0，如果是0第一次点击按钮的时候，位置不会动，所以需要++
    num++;
    boxUl.style.transition = 'transform 0.5s linear 0s';
    boxUl.style.transform = 'translateX(' + num * -800 + 'px)';
    //需要使用到无缝滚动技术(轮播图)
    if (num == boxLi.length - 2) {
      num = 0;
      setTimeout(() => {
        boxUl.style.transform = 'translateX(' + num * -800 + 'px)';
        boxUl.style.transition = 'none';
      }, 500);//时间需要跟过渡的时间匹配
    }
    //小圆点跟随我点击右边按钮的位置进行变化
    circle++;
    if (circle == boxLi.length - 2) {
      circle = 0;
    }
    //小圆点跟随排他思想
    for (var i = 0; i < point.length; i++) {
      point[i].className = 'point';
    }
    point[circle].className = 'point current';
  }

  //左边按钮点击事件
  left.onclick = function () {
    boxUl.style.transition = 'transform 0.5s linear 0s';
    if (num == 0) {
      num++;
      boxUl.style.transform = 'translateX(' + num * 800 + 'px)';
      setTimeout(() => {
        //为什么要-3，因为多加了一张图,length变成5
        num = boxLi.length - 3;
        boxUl.style.transition = 'none';
        boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';
      }, 500);//时间需要跟过渡的时间匹配
    } else {
      num--;
      boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';
    }
    //小圆点跟随我点击左边按钮的位置进行变化
    if (circle == 0) {
      circle = boxLi.length - 2;
    }
    circle--;
    //小圆点跟随排他思想
    for (var i = 0; i < point.length; i++) {
      point[i].className = 'point';
    }
    point[circle].className = 'point current';
  }
  //自动播放轮播图
  //鼠标移入事件
  boxUl.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  right.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  left.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  yuandian.onmouseover = function () {
    //暂停定时器
    clearInterval(timer);
    timer = null;
  }
  //鼠标移出事件
  boxUl.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  right.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  left.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  yuandian.onmouseout = function () {
    //开始定时器
    timer = setInterval(function () {
      //手动调用点击事件
      right.onclick();
    }, 2000);//2000代表2秒钟点击一次
  }
  //使用定时器自动播放(setInterval())
  var timer = setInterval(function () {
    //手动调用点击事件
    right.onclick();
  }, 2000);//2000代表2秒钟点击一次
</script>