css图片切换特效代码

CSS 图片切换特效可以通过 CSS 动画和过渡来实现。以下是一个简单的示例代码，展示了如何使用 CSS 实现图片切换特效：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 图片切换特效</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
</body>
</html>

CSS 样式

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-container img.active {
    opacity: 1;
}

JavaScript 控制

// script.js
const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;

function switchImage() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
}

setInterval(switchImage, 3000); // 每 3 秒切换一次图片

解释

HTML 结构：创建一个包含多张图片的容器，每张图片都有一个 img 标签。
CSS 样式：
- .image-container 设置为相对定位，并设置宽高和溢出隐藏。
- 每张图片设置为绝对定位，初始透明度为 0，并添加过渡效果。
- 当图片具有 active 类时，透明度变为 1，显示该图片。

JavaScript 控制：
- 获取所有图片元素，并设置一个索引变量 currentIndex。
- 定义 switchImage 函数，用于切换图片的 active 类。
- 使用 setInterval 每 3 秒调用一次 switchImage 函数，实现图片切换效果。