实现图片轮播自动播放效果，通过HTML构建结构，CSS设置样式与过渡动画，JavaScript实现自动切换及手动控制功能，适合初学者练习。
实现一个简单的CSS和JavaScript结合的图片轮播自动播放效果，适合初学者练习。下面是一个完整的初级项目示例，包含HTML、CSS和JavaScript代码。
1. 项目结构说明
轮播图包含多张图片，自动切换，也可以手动点击左右按钮切换图片。
2. HTML 结构
创建一个容器，内部包含轮播图片列表和指示点（可选）：
3. CSS 样式
设置轮播容器、隐藏非当前图片、样式按钮和指示点：
立即学习“前端免费学习笔记（深入）”；
.carousel {
position: relative;
width: 600px;
height: 400px;
margin: 50px auto;
overflow: hidden;
border-radius: 10px;
}
.slides {
position: relative;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 16px;
cursor: pointer;
font-size: 24px;
border-radius: 5px;
user-select: none;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.dots {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
cursor: pointer;
}
.dot.active {
background-color: white;
}
4. JavaScript 实现自动播放
添加自动切换逻辑，并支持手动控制：
let slideIndex = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
// 显示指定索引的幻灯片
function showSlide(n) {
slideIndex = n;
if (n >= slides.length) slideIndex = 0;
if (n < 0) slideIndex = slides.length - 1;
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
slides[slideIndex].classList.add('active');
dots[slideIndex].classList.add('active');
}
// 切换幻灯片（偏移量）
function moveSlide(n) {
showSlide(slideIndex + n);
}
// 设置当前幻灯片
function currentSlide(n) {
showSlide(n - 1);
}
// 自动播放
function autoPlay() {
slideIndex++;
showSlide(slideIndex);
}
// 启动自动轮播（每3秒切换一次）
setInterval(autoPlay, 3000);
// 初始化第一张显示
showSlide(0);
基本上就这些。这个项目结合了CSS动画和JavaScript控制，实现了自动播放和手动交互功能，适合CSS和JavaScript初学者理解和扩展。你可以替换图片路径，调整时间间隔或添加更多特效来丰富效果。
