目录
1.图片自动轮播
2.图片手动轮播
3.补充内容
1.图片自动轮播
创建2个盒子，一个盒子进行轮播图展示，一个盒子用来承载图片
<body> <!-- 创建外部展示容器 --><div class="banner-container"> <!-- 创建图片储存容器 --> <div class="banner-img-container"> <img src="./img/banner01.png" alt=""> <img src="./img/banner02.png" alt=""> <img src="./img/banner03.png" alt=""> <img src="./img/banner04.png" alt=""> <img src="./img/banner05.png" alt=""> </div> </div></body>CSS重置reset.css & normalize.css，在写页面时，由于HTML标签自带一些CSS属性，导致在调试样式的时候会出现各种奇怪的问题，为了大概率避免这些问题，在写CSS之前可以引用一下代码。
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}autoMatic.css，通过创建动画，来实现图片的轮播，动画就是将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。
/* 自动轮播样式 */.banner-container{width:1200px;height:400px;/* 轮播图居中 */margin:1rem auto;/* 隐藏超出展示容器的内容 */overflow: hidden;position: relative;}.banner-container .banner-img-container {width:6000px;height:400px;overflow: hidden;position: absolute;/* 开启弹性盒，让图片横向排列 */display: flex; /* animation，@keyframes 搭配使用 run为自定义名称，10s时间*/animation: run 10s ease infinite;}.banner-container .banner-img-container img{width:1200px;height:100%;}/* 动画关键帧 *//* 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。 */@keyframes run {0%,10%{/* margin-left: 0; */transform: translateX(0);}20%,30%{/* margin-left: -1200px;; */transform: translateX(-1200px);}40%,50%{/* margin-left: -2400px; */transform: translateX(-2400px);}60%,70%{/* margin-left: -3600px; */transform: translateX(-3600px);}80%,90%{/* margin-left: -4800px; */transform: translateX(-4800px);}100%{/* margin-left: 0; */transform: translateX(0);}}2.图片手动轮播
锚 URL - 指向页面中的锚，即指向图片存储路径
<!-- 创建外部展示容器 --> <div class="banner-container"> <input type="radio" name="radio-set" checked="checked" id="banner-control-1"/> <a class="banner-nav-a" href="#banner01"></a> <input type="radio" name="radio-set" id="banner-control-2"/> <a class="banner-nav-a" href="#banner02"></a> <input type="radio" name="radio-set" id="banner-control-3"/> <a class="banner-nav-a" href="#banner03"></a> <input type="radio" name="radio-set" id="banner-control-4"/> <a class="banner-nav-a" href="#banner04"></a> <input type="radio" name="radio-set" id="banner-control-5"/> <a class="banner-nav-a" href="#banner05"></a> <!-- 创建图片储存容器 --> <div class="banner-img-container"> <img id="banner01" src="./img/banner01.png" alt=""> <img id="banner02" src="./img/banner02.png" alt=""> <img id="banner03" src="./img/banner03.png" alt=""> <img id="banner04" src="./img/banner04.png" alt=""> <img id="banner05" src="./img/banner05.png" alt=""> </div> </div>manual.css
/* 手动轮播样式 */.banner-container{width:1200px;height:400px;margin:1rem auto;overflow: hidden;position: relative;}.banner-container .banner-img-container {width:6000px;height:400px;overflow: hidden;position: absolute;display: flex;transition: transform 0.6s ease;}.banner-container .banner-img-container img{width:100%;height:100%;}/* 轮播图圆点样式 */.banner-container a {width:24px;height:24px;background:#87c8eb;position: absolute;bottom:1rem;border-radius: 100%;margin:0;z-index: 1;}.banner-container input{width:24px;height:24px;position: absolute;bottom:1rem;margin:0;cursor: pointer;z-index: 2;opacity: 0;}/* 设置导航圆点偏移量（居中布局）*/#banner-control-1,#banner-control-1 + .banner-nav-a{ left: 30%;}#banner-control-2,#banner-control-2 + .banner-nav-a{ left: 40%;}#banner-control-3,#banner-control-3 + .banner-nav-a{ left: 50%;}#banner-control-4,#banner-control-4 + .banner-nav-a{ left: 60%;}#banner-control-5,#banner-control-5 + .banner-nav-a{ left: 70%;}/* 设置高亮 *//*当 input 被选中时 他的兄弟级a标签高亮展示*/input:checked + .banner-nav-a { background-color: #ad244f;}/* 设置轮播图动画 */#banner-control-1:checked ~ .banner-img-container{transform: translateX(0px);}#banner-control-2:checked ~ .banner-img-container{transform: translateX(-1200px);}#banner-control-3:checked ~ .banner-img-container{transform: translateX(-2400px);}#banner-control-4:checked ~ .banner-img-container{transform: translateX(-3600px);}#banner-control-5:checked ~ .banner-img-container{transform: translateX(-4800px);}3.补充内容
最后附布局引用图
css文件引用
