纯CSS实现图片轮播图，附带完整代码和思路解析
<p>这是一个使用纯CSS实现的图片轮播图，没有使用任何JavaScript代码，简单易懂，方便你快速上手。</p>
<h3>代码结构</h3>
<pre>
<!DOCTYPE html>
<html lang="en">
<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>轮播图</title>
<!-- 基础样式 -->
<style>
* {
margin: 0;
padding: 0;
}
/* 定总体范围 */
.wrap {
top: 100px;
width: 1000px;
height: 460px;
background-color: rgb(29, 26, 21);
margin: 0 auto;
position: relative;
background-size: cover;
background-position: center center;
}
/* 左右键基本样式 */
.arrow {
position: absolute;
top: 210px;
}
/*左键与图框距离 */
.prev {
left: 20px;
}
/*右键与图框距离 */
.next {
right: 20px;
}
/* 底部索引栏样式 */
.dots {
width: 150px;
height: 20px;
background-color: rgba(28, 10, 10, 0.7);
position: absolute;
bottom: 20px;
left: 450px;
display: flex;
justify-content: space-around;/* 内部圆点间隔相同排布*/
align-items: center;
}
/* 选中点的样式 */
.dot {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, .7);
border-radius: 50%;
}
.now {
background-color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="arrow prev">
<button>
<svg t="1667322883119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4077" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50">
<path d="M712.166667 86.96A21.333333 21.333333 0 0 1 725.333333 106.666667v853.333333a21.333333 21.333333 0 0 1-36.42 15.086667l-426.666666-426.666667a21.333333 21.333333 0 0 1 0-30.173333l426.666666-426.666667a21.333333 21.333333 0 0 1 23.253334-4.62z" fill="#5C5C66" p-id="4078"></path>
</svg>
</button>
</div>
<div class="arrow next">
<button>
<svg t="1667323073887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4223" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50">
<path d="M311.833333 86.96A21.333333 21.333333 0 0 0 298.666667 106.666667v853.333333a21.333333 21.333333 0 0 0 36.42 15.086667l426.666666-426.666667a21.333333 21.333333 0 0 0 0-30.173333l-426.666666-426.666667a21.333333 21.333333 0 0 0-23.253334-4.62z" fill="#5C5C66" p-id="4224"></path>
</svg>
</button>
</div>
<pre><code> <div class="dots">
<div class="dot now"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</code></pre>
</body>
</html>
</pre>
<h3>代码解析</h3>
<p>代码主要分为两部分：HTML 结构和 CSS 样式。</p>
<h4>HTML 结构</h4>
<ul>
<li><strong>wrap</strong>: 轮播图容器，设置背景图片、尺寸、定位等样式。</li>
<li><strong>arrow</strong>: 左右箭头容器，设置定位和样式。</li>
<li><strong>prev</strong>: 左箭头，设置定位。</li>
<li><strong>next</strong>: 右箭头，设置定位。</li>
<li><strong>dots</strong>: 底部索引栏，设置定位、尺寸、样式以及内部圆点的间隔。</li>
<li><strong>dot</strong>: 每个索引点，设置尺寸、样式，并设置选中状态的样式。</li>
</ul>
<h4>CSS 样式</h4>
<p>CSS 代码主要设置了轮播图容器、箭头、索引栏以及索引点的样式。主要包括：</p>
<ul>
<li><strong>定位</strong>: 使用 <code>position</code> 属性设置元素的定位方式，例如 <code>absolute</code> 和 <code>relative</code>，方便元素的布局和定位。</li>
<li><strong>尺寸</strong>: 使用 <code>width</code> 和 <code>height</code> 属性设置元素的尺寸。</li>
<li><strong>背景</strong>: 使用 <code>background-color</code> 和 <code>background-image</code> 属性设置元素的背景颜色和图片。</li>
<li><strong>圆角</strong>: 使用 <code>border-radius</code> 属性设置圆角，让索引点看起来更圆滑。</li>
<li><strong>布局</strong>: 使用 <code>display: flex</code> 属性设置索引栏的布局，方便内部元素的排列。</li>
<li><strong>选中状态</strong>: 使用 <code>.now</code> 类选择器设置选中状态的索引点的样式。</li>
</ul>
<h3>总结</h3>
<p>通过以上代码和解析，你应该已经了解了如何使用纯 CSS 实现图片轮播图。这是一个简单的例子，你可以根据自己的需求修改代码，例如添加更多图片、调整尺寸、更改样式等等。</p>
<p>希望这篇文章对你有所帮助！</p>
原文地址: https://www.cveoy.top/t/topic/1qg 著作权归作者所有。请勿转载和采集!