HTML CSS 中的自动图片滑块

17 Mar 2025 | 6 分钟阅读

自动图片轮播是一个功能，可以通过 HTML 元素和 CSS 属性在单个 div 标签中显示多张图片。我们可以保存图片并创建页面。

示例

下面的示例展示了使用 CSS 属性的多张图片轮播。

示例 1

示例展示了多张图片自动从右到左或从左到右滑动。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> Automatic image slider in html css </title>
<style media = "screen">
header {
max-width: 1200px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

.row {
display: flex;
overflow: hidden;
}

.imagegroup {
display: flex;
width: 100%;
}
.imagegroup img{
flex-shrink: 0;
object-fit: cover;
border: 3px solid white;
}
.imagegroup {
animation: travel 20s ease-in-out infinite;
}
@keyframes travel {
0%, 100% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(-100%,0,0);
}
}
</style>
</head>
<body>
<h2> Automatic image slider in html css </h2>
<p> We can see the multiple images for the automatic slide in 1 second </p>
<header>
<div class = "row small">
<div class = "imagegroup" style = "animation-delay: 1s;">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm5vqieec4mjwoyzi8x1.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7jakmy309bzbuhbjfn4.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roj2muylbkhsm39450mg.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp16bsz6ihecztrww91w.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niqqsvmzx1k3n03kv5fk.jpg" alt = "">
</div>
</div>
</header>
</body>
</html>   

输出

输出显示了 HTML 和 CSS 中的自动图片轮播。

示例 2

下面的示例展示了带有 CSS 属性的自动图片轮播。我们可以设置四张图片在一个周期内，并让它们连续显示。

 
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> Automatic image slider in html css </title>
<style>
body {
font-size: 100%;
background: #f1f1f1;
}
/* Fallback for hidden attribute */
hidden {
display: none;
}
/** * Keyframes for autoplay */
@-webkit-keyframes autoplay {
/* position of the first slide */
0% {
left: 0;
}
/* position of the second slide */
25% {
left: -40.625rem;
} /* position of the third slide */
50% {
left: -81.25rem;
} /* position of the fourth slide */
100% {
left: -121.875rem;
}
}
@keyframes autoplay {
/* position of the first slide */
0% {
left: 0;
} /* position of the second slide */
25% {
left: -40.625rem;
} /* position of the third slide */
50% {
left: -81.25rem;
} /* position of the fourth slide */
100% {
left: -121.875rem;
}
} /** * Slider */
.slider {
position: relative; /* top margin is for purposes of demo */
margin-top: 3rem;
margin-right: auto;
margin-left: auto;
overflow: hidden;
width: 40.625rem;
height: 26.25rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.slider__list {
position: absolute;
left: 0;
width: 162.5rem;
}
.slider__slide {
float: left;
} /** * Slider control */
.slider__control {
margin-right: auto;
margin-left: auto;
width: 4.5rem;
font-family: sans-serif;
}
.slider__control label {
position: relative;
display: block;
margin-top: 2rem;
margin-bottom: 1rem;
width: 4.5rem;
height: 2rem;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: transparent;
background: #ddd;
border-radius: 2rem;
cursor: pointer;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.slider__control label:before {
content: "autoplay";
position: absolute;
top: 2.5rem;
left: 0;
color: #333;
font-size: 0.95rem;
font-weight: bold;
text-transform: uppercase;
}
.slider__control label:after {
content: "";
position: absolute;
top: 0.25rem;
left: 0.25rem;
display: block;
width: 1.5rem;
height: 1.5rem;
border-radius: 2rem;
background: #fff;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slider__switch:checked + .slider > .slider__list {
-webkit-animation-name: autoplay;
animation-name: autoplay; /* This will change the time it takes to move to the next slide */
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.slider__switch:checked + .slider + .slider__control > label {
background: #455a64;
}
.slider__switch:checked + .slider + .slider__control > label:after {
left: 2.75rem;
}
</style>
</head>
<body>
<h2 style = "margin-top: 150px; text-align: center > Automatic image slider in html css </h2>
<p style = "text-align: center > we can see the multiple image for the automatic slide in 10 second </p>

<input
id = "sliderSwitch"
class = "slider__switch"
type = "checkbox"
name = "sliderSwitch"
hidden
/>
<div class = "slider">
<ul class = "slider__list">
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image=924" alt = "Slide 1" />
</li>
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image = 923" alt = "Slide 2" />
</li>
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image=922" alt = "Slide 3" />
</li>
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image=921" alt = "Slide 4" />
</li>
</ul>
</div>
<div class = "slider__control">
<label for = "sliderSwitch"></label>
</div>
</body>
</html>   

输出

输出显示了 HTML 和 CSS 中的自动图片轮播。

示例 3

下面的示例展示了静态和自动图片轮播的 div 或容器。

 
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> Automatic image slider in html css </title>
<style>
header {
max-width: 1024px;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.row {
display: flex;
overflow: hidden;
}
.imagegroup {
display: flex;
width: 100%;
}
.imagegroup img{
flex-shrink: 0;
object-fit: cover;
border: 3px solid white;
}
.imagegroup {
animation: travel 20s ease-in-out infinite;
}
@keyframes travel {
0%, 100% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(-100%,0,0);
}
}
</style>
</head>
<body>
<h2 style = "margin-top: 150px; text-align: center > Automatic image slider in html css </h2>
<p style = "text-align: center > we can see the two static image and multiple image for the automatic slide in 2 second </p>
<header>
<div class = "row large">
<div class = "imagegroup" style = "border:2px solid white">
<div class = "card"><img src = "https://picsum.photos/200?random = 1" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=2" alt = ""></div>
</div>
</div>
<div class = "row small">
<div class = "imagegroup" style = "animation-delay: 2s;">
<div class = "card"><img src = "https://picsum.photos/200?random=3" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=4" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=5" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=6" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=7" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=8" alt = ""></div>
</div>
</div>
</header>
</body>
</html>   

输出

输出显示了 HTML 和 CSS 中的自动图片轮播。

示例 4

示例展示了容器中多张图片的基本轮播。我们可以在一个周期内滑动多张图片。

 
<!DOCTYPE html>
<html lang = "en">
<!-- codingflicks.com -->
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>Auto image slideshow using HTML CSS</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #17374c;
}
.slider-area {
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
width: 90vmin;
border-radius: 10px;
border: 30px ridge #ddd;
overflow: hidden;
}
.img-area{
width: 100%;
display: flex;
animation: animate 15s linear infinite;
}
.img-area img{
max-width: 100%;
}
@keyframes animate{
0%{
transform: translateX(0);
}
25%{
transform: translateX(0);
}
30%{
transform: translateX(-30%);
}
50%{
transform: translateX(-50%);
}
55%{
transform: translateX(-55%);
}
75%{
transform: translateX(-100%);
}
80%{
transform: translateX(-120%);
}
100%{
transform: translateX(-200%);
}
}
</style>
</head>
<body>
<h2 style = "margin-top: 150px; text-align: center > Automatic image slider in html css </h2>
<p style = "text-align: center > we can see the multiple image for the automatic slide using keyframes </p>

<div class = "slider-area">
<div class = "img-area">
<div class = "card"><img src = "https://picsum.photos/200?random=5" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=6" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=7" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=8" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=3" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=4" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=1" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=2" alt = ""></div>
</div>
</div>
</body>
</html>   

输出

输出显示了 HTML 和 CSS 中的自动图片轮播。

结论

自动图片轮播使用 HTML 元素、图片标签和 CSS 属性滑动多张图片。

下一主题如何使用 HTML 固定表格列宽

HTML CSS 中的自动图片滑块

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML CSS 中的自动图片滑块

示例

结论

相关帖子

如何在 HTML 中使用 Image 标签

HTML 表格行高

如何在 HTML 中更改链接颜色

将 JavaScript 添加到 HTML

如何运行 HTML 程序

HTML Get

Web3 堆栈是什么

HTML 背景颜色

Web3 堆栈 - 为什么 Web3 比 Web2 有更好的用户体验

HTML 仅输入数字

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器