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

最新推荐文章于 2024-02-20 00:03:41 发布

啊啊啊啊啊威

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量659

点赞数 3

文章标签： javascript css html

本文链接：https://blog.csdn.net/zhangawei123/article/details/130916262

版权

首先展示一下实际效果：

老规矩，直接上代码：

<!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;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(45deg);
      margin-right: 5px;
    }

    .slider-controls .prev-btn::before {
      transform: rotate(-135deg);
      margin-right: 0;
      margin-left: 5px;
    }
  </style>
</head>

<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slider-item">
        <img src="./img/1.jpg" alt="Image 1">
      </div>
      <div class="slider-item">
        <img src="./img/2.jpg" alt="Image 2">
      </div>
      <div class="slider-item">
        <img src="./img/3.jpg" alt="Image 3">
      </div>
      <div class="slider-item">
        <img src="./img/4.jpg" alt="Image 4">
      </div>
    </div>
    <div class="slider-controls">
      <button class="prev-btn"></button>
      <button class="next-btn"></button>
    </div>
  </div>

  <script>
    const sliderContainer = document.querySelector('.slider-container');
    const slider = document.querySelector('.slider');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    const slideWidth = document.querySelector('.slider-item').offsetWidth;
    let currentPosition = 0;
    let isPaused = false;

    // 自动轮播
    const autoPlay = () => {
      if (!isPaused) {
        currentPosition -= slideWidth;
        if (currentPosition <= -(slideWidth * (slider.children.length - 1))) {
          currentPosition = 0;
        }
        slider.style.transform = `translateX(${currentPosition}px)`;
      }
      setTimeout(autoPlay, 2000);
    };

    // 鼠标悬停/离开事件监听器
    sliderContainer.addEventListener('mouseenter', () => {
      isPaused = true;
    });

    sliderContainer.addEventListener('mouseleave', () => {
      isPaused = false;
    });

    // 上一页按钮点击事件监听器
    prevBtn.addEventListener('click', () => {
      currentPosition += slideWidth;
      if (currentPosition > 0) {
        currentPosition = -(slideWidth * (slider.children.length-1));
      }
      slider.style.transform = `translateX(${currentPosition}px)`;
    });

    // 下一页按钮点击事件监听器
    nextBtn.addEventListener('click', () => {
      currentPosition -= slideWidth;
      if (currentPosition <= -(slideWidth * (slider.children.length))) {
        currentPosition = 0;
      }
      slider.style.transform = `translateX(${currentPosition}px)`;
    });

    // 启动自动轮播
    autoPlay();
  </script>
</body>

</html>

这段代码实现了一个简单的轮播图功能。具体功能如下：

1. 自动轮播功能：使用`autoPlay()`函数实现自动切换图片的效果。函数首先检查`isPaused`变量的值，如果为`false`表示没有暂停，则将`currentPosition`减去一个图片的宽度。然后检查是否已经达到了最后一张图片，如果是，则将`currentPosition`重置为0，实现循环播放效果。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。然后使用`setTimeout()`方法来实现定时循环调用`autoPlay()`函数，以实现自动播放的功能。

    // 自动轮播
    const autoPlay = () => {
      if (!isPaused) {
        currentPosition -= slideWidth;
        if (currentPosition <= -(slideWidth * (slider.children.length - 1))) {
          currentPosition = 0;
        }
        slider.style.transform = `translateX(${currentPosition}px)`;
      }
      setTimeout(autoPlay, 2000);
    };

2.. 鼠标悬停/离开事件功能：通过使用`addEventListener()`方法，为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标进入容器时，将`isPaused`变量设置为`true`，表示暂停自动轮播。当鼠标离开容器时，将`isPaused`变量设置为`false`，表示恢复自动轮播。

    // 鼠标悬停/离开事件监听器
    sliderContainer.addEventListener('mouseenter', () => {
      isPaused = true;
    });

    sliderContainer.addEventListener('mouseleave', () => {
      isPaused = false;
    });

3. 上一页按钮点击事件功能：通过使用`addEventListener()`方法，为上一页按钮添加了`click`事件监听器。当点击按钮时，将`currentPosition`增加一个图片的宽度。然后检查是否已经达到了第一张图片，如果是，则将`currentPosition`设置为最后一张图片的位置，实现循环切换效果。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。

    // 上一页按钮点击事件监听器
    prevBtn.addEventListener('click', () => {
      currentPosition += slideWidth;
      if (currentPosition > 0) {
        currentPosition = -(slideWidth * (slider.children.length-1));
      }
      slider.style.transform = `translateX(${currentPosition}px)`;
    });

4. 下一页按钮点击事件功能：通过使用`addEventListener()`方法，为下一页按钮添加了`click`事件监听器。当点击按钮时，将`currentPosition`减去一个图片的宽度。然后检查是否已经达到了最后一张图片，如果是，则将`currentPosition`重置为0，实现循环切换效果。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。

    // 下一页按钮点击事件监听器
    nextBtn.addEventListener('click', () => {
      currentPosition -= slideWidth;
      if (currentPosition <= -(slideWidth * (slider.children.length))) {
        currentPosition = 0;
      }
      slider.style.transform = `translateX(${currentPosition}px)`;
    });

觉得有用的好兄弟们点个赞吧TAT

啊啊啊啊啊威

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】一个简单的小案例，关于如何实现轮播图(附完整代码)

函数首先检查`isPaused`变量的值，如果为`false`表示没有暂停，则将`currentPosition`减去一个图片的宽度。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。2.. 鼠标悬停/离开事件功能：通过使用`addEventListener()`方法，为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标离开容器时，将`isPaused`变量设置为`false`，表示恢复自动轮播。
复制链接

扫一扫