如何使用js手搓轮播图效果

 1.animate

我这里使用的是原生js中animate方法和相关原生的鼠标事件（vue和react也是同理），同时还用到了阿里巴巴矢量图标库进行图标的下载，并制作鼠标点击切换轮播、自动轮播等基本的轮播操作。

废话不多说直接上代码。

1.首先创建你想要展示的图片盒子数量（此处”./img/s_1.png“为图片的路径），

2.创建向左和向右的箭头图标（此处”iconfont icon-xiangzuojiantou“是从矢量图标库下载的图标），

3.创建跟图片盒子相关的小点标记

<div class="box">
      <div class="contentlbt">
        <img src="./img/s_1.png" alt="" />
        <img src="./img/s_2.png" alt="" />
        <img src="./img/s_3.png" alt="" />
        <img src="./img/s_4.png" alt="" />
        <img src="./img/s_5.png" alt="" />
        <img src="./img/s_6.png" alt="" />
      </div>
      <span class="iconfont icon-xiangzuojiantou"></span>
      <span class="iconfont icon-xiangyoujiantou"></span>
      <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

4.创建图片盒子相关的基本样式（此处”box“的宽高为图片的宽高，并把多余的图片进行隐藏），后续切换图片就是依靠定位和图片的宽度切换下一张图片。

* {
    margin: 0;
    padding: 0;
    user-select: none;
}

.box {
    width: 1200px;
    height: 675px;
    margin: 100px auto;
    position: relative;
    /* 消失图片 */
    overflow: hidden;
}

.contentlbt img {
    width: 1200px;
    height: 675px;
    /* 图片位置 */
    position: absolute;
    left: 1200px;
}

.contentlbt img:first-child {
    /* 可见图片 */
    left: 0;
}


.box span {
    position: absolute;
    top: calc(50% - 30px);
    width: 60px;
    height: 60px;
    background-color: #ccc;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 35px;
    cursor: pointer;
    display: none;
}

.box .icon-xiangyoujiantou {
    right: 20px;
}

.box .icon-xiangzuojiantou {
    left: 20px;
}

.box:hover span {
    display: block;
}

.box span:hover {
    color: #fff;
}

ul {
    list-style: none;
    position: absolute;
    bottom: 10px;
    left: calc(50% - 87px);
}

li {
    display: inline-block;
    background-color: #999;
    width: 15px;
    height: 2px;
    margin: 0 5px;
    cursor: pointer;
}

.box ul .active {
    background-color: red;
}

5.move函数中就是图片轮播的主要逻辑

• cotnentIndex 用于跟踪当前显示的图片索引，默认为 0。
• isAnimation 用于标记当前是否正在执行图片切换动画。
• move 函数负责切换图片，并处理相应的动画效果和样式变化。
• 首先检查 isAnimation 是否为 true，如果是则直接返回，避免重复执行动画。
• 通过 animate 方法给当前图片和下一张图片添加动画效果，实现图片从右（或左）到中间的移动。
• 更新 cotnentIndex 到下一张图片的索引。
• 更新小点的样式，通过移除所有小点的 class，然后给当前应该激活的小点添加 active 类。

重点：

• 两个动画的播放器时间一定要一致，不然就会出现前后不连接的问题！！！
• 自动轮播的定时器时间，不要和动画执行的时间相同，否则你会得到一个一连串的图片进行移动！！！

// 获取左边按钮
let left_btn = document.querySelector(".icon-xiangzuojiantou");
// 获取右边按钮
let right_btn = document.querySelector(".icon-xiangyoujiantou");
// 获取所有图片
let imgs = document.querySelectorAll("img");
// 获取所有小数点
let point = document.querySelectorAll("li");

let box = document.querySelector(".box");

console.log(box);

// 当前显示图片的索引
let cotnentIndex = 0;

// 判断是否执行过渡
let isAnimation = false;

function move(pic_to, pic_btn, pic2_index) {
  if (isAnimation) return;
  isAnimation = true;

  // 当前图片移动
  let ani = imgs[cotnentIndex].animate([{ left: pic_to + "px" }], {
    duration: 3000,
    fill: "forwards",
  });

  // 动画执行完毕，将是否正在执行动画重置为false
  ani.onfinish = function () {
    isAnimation = false;
  };

  // 先删除所有小点样式
  for (let i = 0; i < point.length; i++) {
    point[i].removeAttribute("class");
  }

  // 切换下一张小点跟随变化 添加样式
  point[pic2_index].classList.add("active");

  // 下一张图片显示
  imgs[pic2_index].animate([{ left: pic_btn + "px" }, { left: 0 }], {
    duration: 3000,
    fill: "forwards",
  });

  // 更新当前显示图片的索引
  cotnentIndex = pic2_index;
}

// 鼠标点击下一张切换
right_btn.onclick = function () {
  moves();
};

function moves() {
  let indexs = cotnentIndex >= imgs.length - 1 ? 0 : cotnentIndex + 1;

  move(-1200, 1200, indexs);
}

// 计时器
let terval = setInterval(moves, 4000);

// 清除计时器
box.onmouseover = function () {
  clearInterval(terval);
};
box.onmouseout = function () {
  terval = setInterval(moves, 4000);
};

// 鼠标点击上一张切换
left_btn.onclick = function () {
  let indexs = cotnentIndex <= 0 ? imgs.length - 1 : cotnentIndex - 1;

  move(1200, -1200, indexs);
};

// 遍历小点
point.forEach(function (btn, index) {
  btn.onclick = function () {
    if (cotnentIndex > index) {
      move(1200, -1200, index);
    }
    if (cotnentIndex < index) {
      move(-1200, 1200, index);
    }
  };
});

 最后运行，得到一个手搓的轮播图效果，下课！！！