用html+css+js实现的一个简单的图片切换特效

实现一个简单的图片切换特效，可以使用 HTML、CSS 和 JavaScript。

整个过程可以分为以下几个步骤：

构建 HTML 结构
样式布局
实现图片切换效果

具体实现流程：

构建 HTML 结构

<div class="slider">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
</div>

<div class="controls">
  <span data-index="1"></span>
  <span data-index="2"></span>
  <span data-index="3"></span>
</div>

我们需要一个容器，用于显示图片，此处使用一个 div 元素，并添加一个类名 slider。然后，插入图片元素 img，设置其 src 属性（对应图片文件的路径），并添加 alt 属性，用于辅助阅读和 SEO 的目的。

同时，我们还需要一个控制器，用于切换图片，此处使用一个 div 元素，并添加一个类名 controls。然后，插入几个 span 元素，分别用于切换到不同的图片，通过 data-index 属性来标识该 span 元素对应的图片的索引值。

样式布局

样式布局可以用 CSS 来调整，主要是对 .slider 和 .controls 的样式进行设置。

.slider {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 350px;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.controls {
  margin-top: 10px;
}

.controls span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.controls span.active {
  background-color: #000;
}

对于 .slider 容器，将其设置为相对定位，设置宽度和高度来指定容器的大小。图片元素 img 需要使用绝对定位，并移动到容器的左上角（top:0;left:0），同时将其 opacity 属性设置为 0，以便在初始化时隐藏图片。

同时，为了让图片切换更加平滑，我们还需要设置过渡效果，并在切换时通过为目标图片添加类名 .active，同时移除当前图片的该类名，来让图片逐渐显示出来。

控制器 .controls 上设置了 margin-top 属性，用于将其与图片容器隔离开来。每个 span 元素需要使用 display:inline-block; 设置为行内块元素，并设置其宽度、高度、边距、圆角和背景颜色等样式，为其添加一个 cursor: pointer; 样式，以让用户鼠标悬停时鼠标指针变为手型。

实现图片切换效果

要实现图片切换效果，我们需要使用 JavaScript 来监听控制器的点击事件，并根据点击 span 元素的 data-index 属性来切换图片。

const images = document.querySelectorAll(".slider img");
const controls = document.querySelectorAll(".controls span");

let currentIndex = 0;

function setActiveImage(index) {
  images[currentIndex].classList.remove("active");
  images[index].classList.add("active");
  currentIndex = index;
}

controls.forEach(function (control) {
  control.addEventListener("click", function () {
    const index = this.getAttribute("data-index");
    setActiveImage(index - 1);
  });
});

首先，获取到 .slider 和 .controls 各自的元素集合，并将 currentIndex 设置为 0，作为初始值。然后，定义 setActiveImage 函数，用于将指定的图片（根据 index）设置为当前显示的图片，并将其对应的 span 元素设置为 active 状态。

最后，遍历所有的控制器 span 元素，为其添加 click 事件监听器。当用户单击某个控制器时，从该元素的 data-index 属性中获取到要显示的图片的索引值，然后调用 setActiveImage 函数来切换到目标图片。

示例1：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>图片切换特效</title>
  <style>
    /* CSS 样式和 HTML 结构略 */
  </style>
</head>

<body>
  <div class="slider">
    <img src="img1.jpg" alt="图片1">
    <img src="img2.jpg" alt="图片2">
    <img src="img3.jpg" alt="图片3">
  </div>

  <div class="controls">
    <span data-index="1" class="active"></span>
    <span data-index="2"></span>
    <span data-index="3"></span>
  </div>

  <script>
    // JavaScript 代码略
  </script>
</body>

</html>

这个示例中指定了一个控制器默认为激活状态，使得在页面最开始加载时即会显示第一张图片。

示例2：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>图片切换特效</title>
  <style>
    /* CSS 样式和 HTML 结构略 */
  </style>
</head>

<body>
  <div class="slider">
    <img src="img1.jpg" alt="图片1">
    <img src="img2.jpg" alt="图片2">
    <img src="img3.jpg" alt="图片3">
  </div>

  <div class="controls">
    <span data-index="1"></span>
    <span data-index="2" class="active"></span>
    <span data-index="3"></span>
  </div>

  <script>
    // JavaScript 代码略
  </script>
</body>

</html>

这个示例中，以第二张图片为默认展示图片，不同于示例1，这里并不用添加图片所在 span 元素的 active 类，每次重新切换展示的时候，active 类都会重新设置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用html+css+js实现的一个简单的图片切换特效 - Python技术站