你点的兔换了兔--实现点击轮播切图

Android

2023-06-04 22:53:53

兔子当道：掌握图片点击轮播的艺术

带你一览新年兔年风采，解锁图片切换新姿势！

新年伊始，萌趣的兔子化身主角，在各大网站轮番亮相。本篇教程将带你领略图片点击轮播 的奥妙，让你轻松实现图片的无缝切换，为你的网站注入灵动的活力。

准备好你的兔子图片

首先，准备一组你心仪的兔子图片，并将它们整齐地放置在同一文件夹中。为图片赋予不同的名称，以便于后续切换。

HTML的图片展示

接下来，创建你的HTML页面，这是展示图片的基础舞台。通过<img>标签，你可以将图片嵌入页面。同时，利用CSS美化图片，调整其大小、位置和外观。

JavaScript的轮播魔法

JavaScript将为图片增添互动性，实现点击轮播的魔法。通过document.querySelector()方法，你可以获取图片元素，然后使用addEventListener()方法，添加点击事件监听器。

当用户点击图片时，点击事件监听器被唤醒，激活事件处理函数。在这个函数中，你可以使用setAttribute()方法修改图片的src属性，轻松切换至下一张图片。

完整代码示例

以下展示完整的HTML和JavaScript代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="image-container">
    <img src="rabbit1.jpg" alt="兔子1">
  </div>
  <script src="script.js"></script>
</body>
</html>

JavaScript代码：

const image = document.querySelector('.image-container img');

image.addEventListener('click', () => {
  if (image.src.includes('rabbit1.jpg')) {
    image.src = 'rabbit2.jpg';
  } else if (image.src.includes('rabbit2.jpg')) {
    image.src = 'rabbit3.jpg';
  } else {
    image.src = 'rabbit1.jpg';
  }
});