前端学习笔记JavaScript - 轮播图二（动画）

带动画轮播图

• 预览图
  

• 说明

轮播分两种，循环无限轮播和不无限轮播
不无限轮播：当index到达最后一张或者第一张图片时，直接return；
无限轮播：首先在html代码中多定义一个li

  <ul>
    <li><img src="IMG/ad1.jpg" alt="1"></li>
    <li><img src="IMG/ad2.jpg" alt="1"></li>
    <li><img src="IMG/ad3.jpg" alt="1"></li>
<!--    无限轮播-->
    <li><img src="IMG/ad1.jpg" alt="1"></li>  
</ul>

此处的和第一个li是一模一样的，当index到最后一个li时，会执行两步操作；

• 左按钮点击到最后一个li时，下次点击应该回到第一个li

1. 将ul的marginleft设置为初始位置，也就是0px
2. 将inde的值设置为初始值，也就是0

• 右边按钮点击到第一个li时，下一次点击应该回到最后一个li

1. 将ul的marginleft设置为最后一个li的位置
2. 将index的值设置为最后一个li的值

• 无限轮播原理

如果是第一张，我要点击上一张，就快速的跳转到最后一张，由于第一张和最后一张都一样，所以没有区别，然后在执行动画到最后一张的上一张
如果是最后一张，我要点击下一张，就快速跳转到第一张，由于第一张和最后一张都一样，所以没有区别，然后在执行动画到第二张。

代码

• html代码

<div>
  <ul>
    <li><img src="IMG/ad1.jpg" alt="1"></li>
    <li><img src="IMG/ad2.jpg" alt="1"></li>
    <li><img src="IMG/ad3.jpg" alt="1"></li>
<!--    无限轮播-->
    <li><img src="IMG/ad1.jpg" alt="1"></li>  
</ul>
  <p>
    <span class="left-btn">&lt;</span>
    <span class="right-btn">&gt;</span>
  </p>
</div>

• css代码

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

    div {
      width: 670px;
      height: 300px;
      border: 1px solid gray;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }

    div ul {
      list-style: none;
      display: flex;

    }

    p {
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    p span {
      padding: 0 15px 0 15px;
      height: 50px;
      line-height: 50px;
      background-color: rgba(0,0,0,0.5);
      color: white;
    }

    p span:hover {
      cursor: pointer;
    }

  </style>

• javascript代码

将之前封装的动画代码拿过来
设置一个index记录点击，当点击左边按钮时执行--操作，点击右边执行++操作，然后通过inde*div的宽度=marginLeft的值。

<script>
  let liImg = document.querySelector("ul li");
  let liImgList = document.querySelectorAll("li");
  let leftBtn = document.querySelector(".left-btn");
  let rightBtn = document.querySelector(".right-btn");
  let timer = null;
  let index = 0;
  leftBtn.onclick = function () {
    // - 不无限轮播
    console.log(Math.abs(index));
    // if (Math.abs(index) >= liImgList.length-1) return;
    // - 无限轮播
    if (Math.abs(index) >= liImgList.length-1) {
      // - 快速跳转到第一张
      liImg.style.marginLeft = "0px";
      index = 0;
    }

    index--;
    let target = index * parseInt(getComputedStyle(liImg).width);
    linearAnimation(target,liImg);
  }

  rightBtn.onclick = function () {
    // - 不无限轮播
    // if (Math.abs(index) <= 0) return;
    // - 无限轮播
    if (Math.abs(index) <= 0) {
      // - 快速的跳转到最后一张
      index = -(liImgList.length-1);
      liImg.style.marginLeft = index * parseInt(getComputedStyle(liImg).width)+"px";

    }
    index++;
    let target = index * parseInt(getComputedStyle(liImg).width);
    linearAnimation(target,liImg);

  }


  // - 缓动动画
  /* target 需要动画的总距离
   * ele 需要动画的元素
   */
  function linearAnimation(target,ele) {
    // - 每次启动定时器前先移出定时器，防止定时器多次执行
    clearInterval(timer);
    // - 起始位置
    let begin = parseInt(getComputedStyle(ele).marginLeft);

    // - 开启定时器
    timer = setInterval(function () {
      // - 此处步数是可变的，所以放在定时器里面
      // - 缓动动画公式 （结束位置 - 起始位置）* 缓动系数（0~1）
      let step = (target - begin) * 0.3;
      // - 使用当前起始位置 + 每次移动距离 = 这次移动的距离
      begin += step;
      if (Math.abs(Math.floor(step)) <= 1){
        // - 停止计时器
        clearInterval(timer);
        // - 赋值到起始位置
        begin = target;
      }
      // - 移动位置
      ele.style.marginLeft = begin+"px";

    },100)
  }
</script>

自动轮播

自动轮播在无限轮播的基础上进行更改就可以了

1. 增加定时器，规定事件内调用点击方法就实现自动轮播

  // - 开启定时器，自动轮播
  let timer2 = setInterval(function () {
    leftBtn.onclick();
  },2000)

2. 鼠标移入时暂停轮播

 // - 获取div元素
  let oBox = document.querySelector("div");


  // - 移入关闭定时器
  oBox.onmousemove = function () {
    clearInterval(timer2)
  }

  oBox.onmouseleave = function () {
    // - 移出重新开启定时器
    timer2 = setInterval(function () {
      leftBtn.onclick();

    },2000)
  }