css初级项目图片轮播自动播放效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-17

浏览次数：次

返回列表

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

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

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

1. 项目结构说明

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

2. HTML 结构

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

<div class="carousel">
  <div class="slides">
    @@##@@
    @@##@@
    @@##@@
  </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 样式

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

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

.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. J*aScript 实现自动播放

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

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动画和J*aScript控制，实现了自动播放和手动交互功能，适合CSS和J*aScript初学者理解和扩展。你可以替换图片路径，调整时间间隔或添加更多特效来丰富效果。