正文

如何用JS制作互动按钮及图片切换效果？

/0 浏览量
1011

想要在网页上制作一个有趣的互动按钮，并且实现图片的切换效果，JavaScript 是一个非常好的选择。下面，我将详细介绍如何使用 JavaScript 实现这一功能。

准备工作

首先，你需要一个基本的 HTML 文件和相应的 CSS 样式。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片切换效果</title>
<style>
  .gallery {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }
  .button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  .hidden {
    display: none;
  }
</style>
</head>
<body>

<div id="gallery" class="gallery">
  <img src="image1.jpg" alt="Image 1" class="active">
  <img src="image2.jpg" alt="Image 2" class="hidden">
  <img src="image3.jpg" alt="Image 3" class="hidden">
</div>

<button class="button" onclick="nextImage()">下一张</button>
<button class="button" onclick="prevImage()">上一张</button>

<script>
// JavaScript 代码将在这里
</script>

</body>
</html>

JavaScript 实现图片切换

在 <script> 标签内，我们需要添加 JavaScript 代码来实现图片的切换效果。

let currentImageIndex = 0;
const images = document.querySelectorAll('#gallery img');
const totalImages = images.length;

function updateGallery() {
  images.forEach((image, index) => {
    if (index === currentImageIndex) {
      image.classList.add('active');
    } else {
      image.classList.remove('active');
      image.classList.add('hidden');
    }
  });
}

function nextImage() {
  currentImageIndex = (currentImageIndex + 1) % totalImages;
  updateGallery();
}

function prevImage() {
  currentImageIndex = (currentImageIndex - 1 + totalImages) % totalImages;
  updateGallery();
}

// 初始化图片库
updateGallery();

解释

  1. 初始化变量：currentImageIndex 用于跟踪当前显示的图片索引。

  2. 获取元素：使用 document.querySelectorAll 获取所有图片元素。

  3. updateGallery 函数：根据当前的索引，显示当前图片，隐藏其他图片。

  4. nextImage 函数：增加 currentImageIndex 的值，并使用模运算保证索引不会超过图片总数。

  5. prevImage 函数：减少 currentImageIndex 的值，并同样使用模运算处理。

  6. 初始化：在页面加载时，调用 updateGallery 来设置初始的图片显示状态。

这样，你就可以实现一个基本的图片切换效果了。你可以根据自己的需求调整样式和功能，比如添加动画效果、改变按钮功能等。通过不断实践和改进，你可以制作出更加丰富的互动效果。

-- 展开阅读全文 --