【JavaScript】一个简单的小案例，关于如何实现轮播图(附完整代码)

原创

于 2023-05-28 19:53:07 发布 · 801 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

本文介绍了一个使用JavaScript实现的简单轮播图功能，包括自动轮播、鼠标悬停暂停、上一页和下一页按钮点击事件。通过`autoPlay()`函数和事件监听器，结合CSS的`transform: translateX()`实现图片平移动画，实现无缝循环切换效果。

首先展示一下实际效果：

老规矩，直接上代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    /* CSS样式代码 */

    .slider-container {
      position: relative;
      width: 600px;
      /* 设置轮播图容器宽度 */
      height: 400px;
      /* 设置轮播图容器高度 */
      overflow: hidden;
      /* 隐藏超出容器的部分 */
      margin: 0 auto;
    }

    .slider {
      display: flex;
      transition: transform 0.3s ease-in-out;
      /* 添加过渡效果 */
    }

    .slider-item {
      flex-shrink: 0;
      width: 100%;
      /* 设置每张图片的宽度 */
      height: 100%;
      /* 设置每张图片的高度 */
    }

    .slider-item img {
      width: 100%;
      /* 设置每张图片的宽度 */
      height: 100%;
      /* 设置每张图片的高度 */
    }

    .slider-controls {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-bet