js做图片轮换广告

封面图 • 2025-12-17 • JavaScript

使用 JavaScript 实现图片轮换广告（也叫图片轮播、幻灯片）是一个常见的前端功能。下面我将为你提供一个简单的实现方式，包括 HTML、CSS 和 JavaScript 代码。

---

### ✅ 功能说明：
- 自动轮换多张图片
- 每隔几秒切换下一张
- 可以手动点击左右按钮切换

---

## 🧩 1. HTML 结构

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片轮换广告</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>
```

---

## 🎨 2. CSS 样式（`style.css`）

```css
.slider {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
}

.slides {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.slide.active {
    display: block;
}
```

---

## 🧠 3. JavaScript 逻辑（`script.js`）

```javascript
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function showSlide(index) {
    // 隐藏所有图片
    slides.forEach(slide => slide.classList.remove('active'));
    // 显示当前图片
    slides[index].classList.add('active');
}

function nextSlide() {
    currentIndex = (currentIndex + 1) % totalSlides;
    showSlide(currentIndex);
}

function prevSlide() {
    currentIndex = (currentIndex - 1) % totalSlides;
    if (currentIndex < 0) currentIndex += totalSlides;
    showSlide(currentIndex);
}

// 自动轮换
setInterval(nextSlide, 3000);
```

---

## ✅ 补充说明：

- `image1.jpg`, `image2.jpg`, `image3.jpg` 是你自己的图片路径，记得替换成真实路径。
- 你可以通过修改 `setInterval(nextSlide, 3000);` 中的 `3000` 来控制轮换时间（单位是毫秒）。
- 如果你想让轮换更平滑，可以添加 CSS 的 `transition` 属性。

---

## 🛠️ 扩展建议：

- 添加圆点导航（dots）
- 支持触摸滑动（移动端）
- 图片懒加载
- 加入动画效果（如淡入淡出）

如果你需要这些高级功能，也可以告诉我，我可以继续帮你扩展！