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

啊啊啊啊啊威

于 2023-05-28 19:53:07 发布

阅读量784

点赞数 3

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/zhangawei123/article/details/130916262

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先展示一下实际效果：

老规矩，直接上代码：

<!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-between;
      align-items: center;
      width: 100%;
      z-index: 1;
      /* 将导航按钮置于轮播图上方 */
    }

    .slider-controls button {
      background-color: #333;
      color: #fff;
      border: none;
      padding: 5px 10px;
      margin: 0 5px;
      cursor: pointer;
    }

    .slider-controls .prev-btn::before,
    .slider-controls .next-btn::after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      bord