无缝轮播的秘密

小老弟儿
151 阅读1分钟

1、原理

1.0  首先需要一个盒子用来放置图片图片的大小将盒子撑满
1.1  要想实现无缝轮播其实需要在最后多放一张与图一一摸一样的图片
1.2  需要用到的知识点：定位，动画，定时器
1.3  实现逻辑:通过改变定位的距离与动画的过渡效果实现

slideshow.png

注释非常清晰可以多看看注释哦！第一次做做的不好努力学习中...

2、CSS+HTML的实现代码

   <!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无缝轮播</title>
        <style>
          /* 主体部分 */

          * {
            margin: 0;
            padding: 0;
            list-style: none;
          }

          #slider {
            position: relative;
            width: 680px;
            height: 340px;
            margin: 100px auto;
            /* outline: 2px solid red; */
            overflow: hidden;
          }

          .slider-list {
            display: flex;
            position: relative;
            left: 0px;
            width: 100%;
            height: 100%;
            transition: all 1s;
          }

          .slider-list li {
            flex-shrink: 0;
            width: 680px;
            height: 340px;
          }

          .dot-list {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            padding: 2px 10px;
            border-radius: 12px;
            border-color: rgba(255, 255, 255, 0.3);
          }

          .dot-list .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
          }

          .dot-list .dot.cur {
            background-color: red;
          }

          .arraw {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.795);
            display: none;
          }

          .prev {
            left: 0;
          }

          .next {
            right: 0;
          }

          .arraw span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(50%, 50%);
            width: 10px;
            height: 10px;
            border-bottom: 2px solid white;
            border-left: 2px solid white;
          }

          .prev span {
            transform: translate(-50%, -50%) rotate(45deg);
          }

          .next span {
            transform: translate(-50%, -50%) rotate(-135deg);
          }

          #slider:hover .arraw {
            display: block;
          }
        </style>
      </head>

      <body>
        <div id="slider">
          <!-- 图片部分 -->
          <ul class="slider-list">
            <!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
            <li style="background: #453a94">1</li>
            <li style="background: #fff1eb">2</li>
            <li style="background: #4facfe">3</li>
            <li style="background: #96e6a1">4</li>
            <li style="background: #fda085">5</li>
            <li style="background: #a18cd1">6</li>
          </ul>
          <!-- 小点部分 -->
          <div class="dot-list">
            <span class="dot cur"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
          <!--箭头布分 -->
          <a href="#" class="arraw prev" id="left">
            <span></span>
          </a>
          <a href="#" class="arraw next" id="right">
            <span></span>
          </a>
        </div>
      </body>
    </html>

3、JS的实现代码 多看看注释注释很详细

<script>
  var slid = document.getElementById("slider");
  var slidLis = slid.getElementsByTagName("ul")[0];
  console.log(slidLis);
  // var slidLis=document.querySelector(".slider-list")
  var slidLi = slidLis.getElementsByTagName("li");

  var lef = document.getElementById("left");
  var righ = document.getElementById("right");

  var index = 0;

  // 轮播图片的函数
  function lun() {
    // 每次调用让下标 加加
    index++;
    // 调用小圆点的函数
    circe();
    // 这个是给 ul 加的相对定位 每次都往左平移
    slidLis.style.left = index * -680 + "px";
    // 给ul添加过渡的这个属性
    slidLis.style.transition = "all 1s";
    // 判断下标 等于5的时候改变下标
    if (index === 5) {
      index = 0;
      // 执行一个定时器 一秒后改变 定位的数值 清除过渡的效果
      setTimeout(function () {
        slidLis.style.left = 0;
        slidLis.style.transition = "none";
      }, 1000);
    }
    // 再次调用小圆点的函数
    circe();
  }
  // 右侧按钮点击事件直接调用 轮播图的函数就可以
  righ.addEventListener("click", lun);
  // 左侧按钮点击事件
  lef.addEventListener("click", function () {
    // 让index减减
    index--;
    // 判断当index等于-1的时候 改变当前相对定位的数值 清空过渡效果 改变index的值
    if (index === -1) {
      slidLis.style.left = 5 * -680 + "px";
      slidLis.style.transition = "none";
      index = 4;
      // 接着重新计算定位的值 开启过渡效果
      setTimeout(function () {
        slidLis.style.left = index * -680 + "px";
        slidLis.style.transition = "all 1s";
      }, 0);
    } else {
      // 否则的话直接改变定位的数值
      slidLis.style.left = index * -680 + "px";
    }
    // 调用小圆点的函数
    circe();
  });
  //  自动轮播 // 开启定时器调用轮播图的函数 两秒一次
  var autoplay = setInterval(lun, 2000);
  // 鼠标划入停止定时器
  slid.addEventListener("mouseenter", function () {
    clearInterval(autoplay);
  });
  // 鼠标划出重新开启定时器
  slid.addEventListener("mouseleave", function () {
    clearInterval;
    autoplay = setInterval(lun, 2000);
  });

  //小圆点
  // 获取小圆点
  var dotList = document.getElementsByTagName("span");
  // 小圆点不是渲染上的 
  // 循环了所有的小圆点判断 i 等于上面图片的下标 添加一个带有样式的类名 否则删除这个类名
  function circe() {
    for (var i = 0; i < dotList.length; i++) {
      if (i === index) {
        dotList[i].classList.add("cur");
      } else {
        dotList[i].classList.remove("cur");
      }
    }
  }
</script>
avatar
文章
阅读
粉丝