CSS 实现轮播图效果(自动切换、无缝衔接、小圆点切换)

刘先森带你看世界 發表於 2026-5-3 22:16:41

CSS 实现轮播图效果(自动切换、无缝衔接、小圆点切换)

<p>案例 - 实现原神官网中的轮播图</p>
<p>本文中的代码着力实现该图中的效果，一个简单的轮播图：</p>
<blockquote><p>由于没有使用到 JavaScript 所以最终呈现的效果不够完美<br />！轮播图的实现参考该博客（更详细）</p></blockquote>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/20231227170853128.jpg" /></p>
<h3>1、基础 html 代码</h3>
<ul><li>使用 <code>ul-li</code> 放入多张需要轮播的图片</li><li>使用 <code>input</code> 标签指定 type=“radio” 创建小圆点按钮，并设置单独的 id 属性</li><li>使用 <code>label</code> 的 for 属性指定到各个 input 按钮的 id</li><li>将各个部分链接到特定的 css 样式中</li></ul>
<div class="jb51code"><pre class="brush:css;"><div class="carousel_map">
<div class="slide">

<input type="radio" name="pic" id="pic1" checked/>
<input type="radio" name="pic" id="pic2"/>
<input type="radio" name="pic" id="pic3"/>
<input type="radio" name="pic" id="pic4"/>
<div class="labels">
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
<label for="pic4"></label>
</div>

<ul class="list">
<li class="item">
<a href="###">
<img src="img/news1.jpg" style="height: 100%; width: 100%;"/>
</a>
</li>
<li class="item">
<a href="###">
<img src="img/news2.jpg" style="height: 100%; width: 100%;"/>
</a>
</li>
<li class="item">
<a href="###">
<img src="img/news3.jpg" style="height: 100%; width: 100%;"/>
</a>
</li>
<li class="item">
<a href="###">
<img src="img/news4.jpg" style="height: 100%; width: 100%;"/>
</a>
</li>
<li class="item">
<a href="###">
<img src="img/news1.jpg" style="height: 100%; width: 100%;"/>
</a>
</li>
</ul>
</div>
</div></pre></div>
<h3>2、链接 css 样式</h3>
<p><strong>完整 css 代码</strong></p>
<div class="jb51code"><pre class="brush:css;">* {
margin: 0;
padding: 0;
}
.carousel_map {
width: 640px;
height: 400px;
}
.slide {
width: inherit;
height: inherit;
overflow: hidden;
position: relative;
}
/* 鼠标放上去显示按钮 */
.slide:hover .labels {
display: flex;
}
.slide:hover .list {
animation: none;
}
.slide input {
display: none;
}
/* 按钮位置 */
.labels {
position: absolute;
bottom: 0.5em;
z-index: 1;
width: inherit;
justify-content: center;
display: none; /* 鼠标移开隐藏按钮 */
}
/* 按钮样式 */
.labels label {
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: 0 0.3rem;
border: 0.1rem solid #fff;
background-color: transparent;
box-sizing: border-box;
cursor: pointer;
}
/* 选择哪个按钮就有被点击的效果 */
input:checked ~ .labels label,
input:checked ~ .labels label,
input:checked ~ .labels label,
input:checked ~ .labels label {
background-color: #fff;
border: 0.1rem solid #fff;
}
/* 按钮控件选择图片 */
input:checked ~ .list {
transform: translate(calc(0 * 640px));
}
input:checked ~ .list {
transform: translate(calc(-1 * 640px));
}
input:checked ~ .list {
transform: translate(calc(-2 * 640px));
}
input:checked ~ .list {
transform: translate(calc(-3 * 640px));
}
ul {
list-style: none;
}
.list {
width: calc(5 * 640px);
height: inherit;
position: relative;
/* 设置动画效果 */
animation: move 15s ease 1s infinite;
}
/* 动画关键帧轮播 */
@keyframes move {
0% {
transform: translate(calc(0 * 640px));
}
25% {
transform: translate(calc(-1 * 640px));
}
50% {
transform: translate(calc(-2 * 640px));
}
75% {
transform: translate(calc(-3 * 640px));
}
100% {
transform: translate(calc(-4 * 640px));
}
}
.item {
width: 640px;
height: 400px;
float: left;
}</pre></div>
<p><strong>定义轮播图的宽高</strong></p>
<blockquote><p>在 <code>.carousel_map</code> 中定义要展示的轮播图区域的<code>宽高</code></p></blockquote>
<div class="jb51code"><pre class="brush:css;">* {
margin: 0;
padding: 0;
}
.carousel_map {
width: 640px;
height: 400px;
}
.slide {
width: inherit;
height: inherit;
}</pre></div>
<p>图中即为要展示的区域</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/20231227170853129.jpg" /></p>
<p><strong>将所有图片排成一排</strong></p>
<blockquote><p>所有图片左浮动，调整 <code>.list</code> 可容纳的宽度，并去掉 <code>ul</code> 的默认样式</p></blockquote>
<div class="jb51code"><pre class="brush:css;">ul {
list-style: none;
}
.list {
width: calc(4 * 640px);
height: inherit;
position: relative;
}
.item {
width: 640px;
height: 400px;
float: left;
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/20231227170853130.jpg" /></p>
<p><strong>现实无缝切换轮播效果</strong></p>
<blockquote><p>1）通过动画让 <code>.list</code> 水平左移，外部 <code>.slide</code> 窗口保持不变，将超出 <code>.slide</code> 的部分隐藏<br />2）当动画轮播完最后一张图时会跳到 <code>图1</code> 导致轮播不连贯，所以可以在 html 中多加一张 <code>图1</code> 在最后<br />3）再给 <code>.list</code> 增加一倍的宽度</p></blockquote>
<div class="jb51code"><pre class="brush:css;">.slide {
width: inherit;
height: inherit;
/* 新增 */
overflow: hidden;
position: relative;
}
.list {
/* 多加了一张图的宽度 */
width: calc(5 * 640px);
height: inherit;
position: relative;
/* 设置动画效果 */
animation: move 15s ease 1s infinite;
}
/* 动画关键帧轮播 */
@keyframes move {
0% {
transform: translate(calc(0 * 640px));
}
25% {
transform: translate(calc(-1 * 640px));
}
50% {
transform: translate(calc(-2 * 640px));
}
75% {
transform: translate(calc(-3 * 640px));
}
100% {
transform: translate(calc(-4 * 640px));
}
}</pre></div>
<p>目前已经出现了轮播效果：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/20231227170853131.png" /></p>
<p><strong>小圆点切换</strong></p>
<blockquote><p>1）设置鼠标经过轮播图区域时 <code>停止动画</code><br />2）在HTML代码中添加 <code>单选按钮</code>，通过单选按钮的选中切换图片，又因为单选按钮无法设置样式，所以使用 <code>label</code> 标签配合生成圆点样式。<br />3）将单选按钮 <code>隐藏</code> ，再把制作好的 <code>小圆点</code> 定位到图片区域，以及添加选中效果。</p></blockquote>
<div class="jb51code"><pre class="brush:css;">/* 鼠标经过轮播图区域停止动画 */
.slide:hover .list {
animation: none;
}
/* 鼠标放上去显示按钮 */
.slide:hover .labels {
display: flex;
}
/* 将单选按钮隐藏 */
.slide input {
display: none;
}
/* 制作的小圆点按钮 */
/* 按钮位置 */
.labels {
position: absolute;
bottom: 0.5em;
z-index: 1;
width: inherit;
justify-content: center;
display: none; /* 鼠标移开隐藏按钮 */
}
/* 按钮样式 */
.labels label {
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: 0 0.3rem;
border: 0.1rem solid #fff;
background-color: transparent;
box-sizing: border-box;
cursor: pointer;
}</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/20231227170853132.png" /></p>
<p><strong>通过圆点按钮选中图片切换</strong></p>
<div class="jb51code"><pre class="brush:css;">/* 选择哪个按钮就有被点击的效果 */
input:checked ~ .labels label,
input:checked ~ .labels label,
input:checked ~ .labels label,
input:checked ~ .labels label {
background-color: #fff;
border: 0.1rem solid #fff;
}
/* 按钮控件选择图片 */
input:checked ~ .list {
transform: translate(calc(0 * 640px));
}
input:checked ~ .list {
transform: translate(calc(-1 * 640px));
}
input:checked ~ .list {
transform: translate(calc(-2 * 640px));
}
input:checked ~ .list {
transform: translate(calc(-3 * 640px));
}</pre></div>
<p>如图，即可通过小圆点进行图片间的切换了：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/20231227170853133.png" /></p>

頁: [1]

琼殿技术论坛's Archiver

CSS 实现轮播图效果(自动切换、无缝衔接、小圆点切换)