JavaScript图片轮播

代码在文章最后面（含图片URL）

实现功能

按向左按钮图片显示上一张
按向右按钮图片显示下一张
每隔2000毫秒显示下一张图
底部三个圆点显示当前的图片的编号

实现流程

**初始化图片数组 **创建一个包含图片URL的数组，轮播时会通过这个数组来切换图片。
创建当前索引变量 这个变量用来追踪当前显示的图片索引。
**创建自动轮播图片函数 **该函数负责更改轮播图中显示的图片，并根据当前索引更新指示器的状态。
**创建指示器的函数 **此函数在HTML中创建了与图片数量相同的指示器元素，并为第一个指示器添加了active-indicator类，以表示它是活动的。
下一张图片按钮 当用户点击“下一张”按钮时，这个函数会被触发。它将currentIndex加一，如果索引等于图片数组长度，则将索引重置为0，然后调用showImage函数来更新图片和指示器。
**上一张图片按钮 **当用户点击“上一张”按钮时，这个函数会被触发。它将currentIndex减一，如果索引小于0，则将索引设置为图片数组的最后一个元素的索引，然后调用showImage函数来更新图片和指示器。
**创建事件监听器 **将这些监听器绑定到“下一张”和“上一张”按钮上，当按钮被点击时，它们会调用相应的函数。
**启动自动轮播 **设置了一个定时器，每隔2000毫秒（2秒）调用一次nextImage函数，从而实现图片的自动轮播。

ONGD：通过操作DOM元素，用CSS类来控制显示的图片和当前图片指示器的状态，实现了图片轮播。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Carousel</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .carousel img {
    width: 100%;
    height: auto;
  }
  .controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  .control-button {
    background-color: white;
    color: #333;
    font-size: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .indicator-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  .indicator {
    background-color: #ccc;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .active-indicator {
    background-color: black;
  }
</style>
</head>
<body>
<div class="carousel">
  <img src="" alt="Image" id="carousel-image">
  <div class="controls">
    <button class="control-button" id="prev-btn">👈</button>
    <button class="control-button" id="next-btn">👉</button>
  </div>
  <div class="indicator-container" id="indicators"></div>
</div>
<script>
  const images = [
    'https://q9.itc.cn/q_70/images03/20240715/8319afaf350346a08a4d51b65638e39d.png',
    'https://n.sinaimg.cn/sinacn20191106ac/42/w500h342/20191106/6b91-ihyxcrp9562392.jpg',
    'https://n.sinaimg.cn/news/transform/20170412/D-Ac-fyecfam0465124.jpg'
  ];
  let currentIndex = 0;
  function showImage(index) {
    document.getElementById('carousel-image').src = images[index];
    const indicators = document.getElementById('indicators').children;
    for (let i = 0; i < indicators.length; i++) {
      indicators[i].classList.remove('active-indicator');
    }
    indicators[index].classList.add('active-indicator');
  }
  function createIndicators() {
    const indicatorContainer = document.getElementById('indicators');
    for (let i = 0; i < images.length; i++) {
      const indicator = document.createElement('div');
      indicator.classList.add('indicator');
      if (i === 0) {
        indicator.classList.add('active-indicator');
      }
      indicatorContainer.appendChild(indicator);
    }
  }
  function nextImage() {
    currentIndex++;
    if (currentIndex >= images.length) {
      currentIndex = 0;
    }
    showImage(currentIndex);
  }
  function prevImage() {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = images.length - 1;
    }
    showImage(currentIndex);
  }
  document.getElementById('next-btn').addEventListener('click', nextImage);
  document.getElementById('prev-btn').addEventListener('click', prevImage);
  // Auto-play functionality
  setInterval(nextImage, 2000);
  createIndicators();
  showImage(currentIndex);
</script>
</body>
</html>

标签： html javascript css

本文转载自: https://blog.csdn.net/w11111xxxl/article/details/140742524
版权归原作者 睿智的海鸥 所有，如有侵权，请联系我们删除。

JavaScript图片轮播

实现功能

实现流程

完整代码

发表评论

“JavaScript图片轮播”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航