css初级项目图片轮播自动播放效果-css教程-PHP中文网

css初级项目图片轮播自动播放效果

P粉602998670

发布： 2025-10-17 21:22:01

原创

730人浏览过

实现图片轮播自动播放效果，通过HTML构建结构，CSS设置样式与过渡动画，JavaScript实现自动切换及手动控制功能，适合初学者练习。

css初级项目图片轮播自动播放效果

实现一个简单的CSS和JavaScript结合的图片轮播自动播放效果，适合初学者练习。下面是一个完整的初级项目示例，包含HTML、CSS和JavaScript代码。

1. 项目结构说明

轮播图包含多张图片，自动切换，也可以手动点击左右按钮切换图片。

2. HTML 结构

创建一个容器，内部包含轮播图片列表和指示点（可选）：

<div class="carousel">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1" class="slide active">
    <img src="image2.jpg" alt="Image 2" class="slide">
    <img src="image3.jpg" alt="Image 3" class="slide">
  </div>
  <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
  <button class="next" onclick="moveSlide(1)">&#10095;</button>
  <div class="dots">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</div>

登录后复制

3. CSS 样式

设置轮播容器、隐藏非当前图片、样式按钮和指示点：

播记

播客shownotes生成器 | 为播客创作者而生

查看详情

立即学习“前端免费学习笔记（深入）”；

.carousel {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 50px auto;
  overflow: hidden;
  border-radius: 10px;
}
<p>.slides {
position: relative;
width: 100%;
height: 100%;
}</p><p>.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}</p><p>.slide.active {
opacity: 1;
}</p><p>.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;
}</p><p>.prev {
left: 10px;
}</p><p>.next {
right: 10px;
}</p><p>.dots {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}</p><p>.dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
cursor: pointer;
}</p><p>.dot.active {
background-color: white;
}</p>

登录后复制

4. JavaScript 实现自动播放

添加自动切换逻辑，并支持手动控制：

let slideIndex = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
<p>// 显示指定索引的幻灯片
function showSlide(n) {
slideIndex = n;
if (n >= slides.length) slideIndex = 0;
if (n < 0) slideIndex = slides.length - 1;</p><p>slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));</p><p>slides[slideIndex].classList.add('active');
dots[slideIndex].classList.add('active');
}</p><p>// 切换幻灯片（偏移量）
function moveSlide(n) {
showSlide(slideIndex + n);
}</p><p>// 设置当前幻灯片
function currentSlide(n) {
showSlide(n - 1);
}</p><p>// 自动播放
function autoPlay() {
slideIndex++;
showSlide(slideIndex);
}</p><p>// 启动自动轮播（每3秒切换一次）
setInterval(autoPlay, 3000);</p><p>// 初始化第一张显示
showSlide(0);</p>

登录后复制

基本上就这些。这个项目结合了CSS动画和JavaScript控制，实现了自动播放和手动交互功能，适合CSS和JavaScript初学者理解和扩展。你可以替换图片路径，调整时间间隔或添加更多特效来丰富效果。

以上就是css初级项目图片轮播自动播放效果的详细内容，更多请关注php中文网其它相关文章！