前端：纯css实现图片轮播（自动+手动）

来自云龙湖轮廓分明的月亮  金牌会员 | 2024-6-14 17:50:01 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 625|帖子 625|积分 1885

目录
1.图片自动轮播
2.图片手动轮播
3.补充内容

1.图片自动轮播

创建2个盒子，一个盒子举行轮播图展示，一个盒子用来承载图片
  1. <body>
  2.         <!-- 创建外部展示容器 -->
  3.                 <div class="banner-container">
  4.             <!-- 创建图片储存容器 -->
  5.             <div class="banner-img-container">
  6.                 <img src="./img/banner01.png" alt="">
  7.                 <img src="./img/banner02.png" alt="">
  8.                 <img src="./img/banner03.png" alt="">
  9.                 <img src="./img/banner04.png" alt="">
  10.                 <img src="./img/banner05.png" alt="">
  11.             </div>
  12.         </div>
  13.         </body>
复制代码
CSS重置reset.css & normalize.css，在写页面时，由于HTML标签自带一些CSS属性，导致在调试样式的时间会出现各种奇怪的题目，为了大概率克制这些题目，在写CSS之前可以引用一下代码。
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14.         margin: 0;
  15.         padding: 0;
  16.         border: 0;
  17.         font-size: 100%;
  18.         font: inherit;
  19.         vertical-align: baseline;
  20. }
  21. /* HTML5 display-role reset for older browsers */
  22. article, aside, details, figcaption, figure,
  23. footer, header, hgroup, menu, nav, section {
  24.         display: block;
  25. }
  26. body {
  27.         line-height: 1;
  28. }
  29. ol, ul {
  30.         list-style: none;
  31. }
  32. blockquote, q {
  33.         quotes: none;
  34. }
  35. blockquote:before, blockquote:after,
  36. q:before, q:after {
  37.         content: '';
  38.         content: none;
  39. }
  40. table {
  41.         border-collapse: collapse;
  42.         border-spacing: 0;
  43. }
复制代码
 autoMatic.css，通过创建动画，来实现图片的轮播，动画就是将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。
  2. /* 自动轮播样式 */
  3. .banner-container{
  4.         width:1200px;
  5.         height:400px;
  6.         /* 轮播图居中 */
  7.         margin:1rem auto;
  8.         /* 隐藏超出展示容器的内容 */
  9.         overflow: hidden;
  10.         position: relative;
  11. }
  13. .banner-container .banner-img-container {
  14.         width:6000px;
  15.         height:400px;
  16.         overflow: hidden;
  17.         position: absolute;
  18.         /* 开启弹性盒，让图片横向排列 */
  19.         display: flex;
  20.    /* animation，@keyframes 搭配使用  run为自定义名称，10s时间*/
  21.         animation: run 10s ease infinite;
  22. }
  24. .banner-container .banner-img-container img{
  25.         width:1200px;
  26.         height:100%;
  27. }
  29. /* 动画关键帧 */
  30. /* 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。 */
  31. @keyframes run {
  32.         0%,10%{
  33.                 /* margin-left: 0; */
  34.                 transform: translateX(0);
  35.         }
  36.         20%,30%{
  37.                 /* margin-left: -1200px;; */
  38.                 transform: translateX(-1200px);
  39.         }
  40.         40%,50%{
  41.                 /* margin-left: -2400px; */
  42.                 transform: translateX(-2400px);
  43.         }
  44.         60%,70%{
  45.                 /* margin-left: -3600px; */
  46.                 transform: translateX(-3600px);
  47.         }
  48.         80%,90%{
  49.                 /* margin-left: -4800px; */
  50.                 transform: translateX(-4800px);
  51.         }
  52.         100%{
  53.                 /* margin-left: 0; */
  54.                 transform: translateX(0);
  55.         }
  56. }
复制代码
2.图片手动轮播

锚 URL - 指向页面中的锚，即指向图片存储路径
  1. <!-- 创建外部展示容器 -->
  2.         <div class="banner-container">
  3.             <input type="radio" name="radio-set" checked="checked" id="banner-control-1"/>
  4.             <a class="banner-nav-a" href="#banner01"></a>
  5.             <input type="radio" name="radio-set"  id="banner-control-2"/>
  6.             <a class="banner-nav-a" href="#banner02"></a>
  7.             <input type="radio" name="radio-set"  id="banner-control-3"/>
  8.             <a class="banner-nav-a" href="#banner03"></a>
  9.             <input type="radio" name="radio-set"  id="banner-control-4"/>
  10.             <a class="banner-nav-a" href="#banner04"></a>
  11.             <input type="radio" name="radio-set"  id="banner-control-5"/>
  12.             <a class="banner-nav-a" href="#banner05"></a>
  13.             <!-- 创建图片储存容器 -->
  14.             <div class="banner-img-container">
  15.                 <img id="banner01" src="./img/banner01.png" alt="">
  16.                 <img id="banner02" src="./img/banner02.png" alt="">
  17.                 <img id="banner03" src="./img/banner03.png" alt="">
  18.                 <img id="banner04" src="./img/banner04.png" alt="">
  19.                 <img id="banner05" src="./img/banner05.png" alt="">
  20.             </div>
  21.         </div>
复制代码
manual.css
  2. /* 手动轮播样式 */
  3. .banner-container{
  4.         width:1200px;
  5.         height:400px;
  6.         margin:1rem auto;
  7.         overflow: hidden;
  8.         position: relative;
  9. }
  11. .banner-container .banner-img-container {
  12.         width:6000px;
  13.         height:400px;
  14.         overflow: hidden;
  15.         position: absolute;
  16.         display: flex;
  17.         transition: transform 0.6s ease;
  18. }
  20. .banner-container .banner-img-container  img{
  21.         width:100%;
  22.         height:100%;
  23. }
  25. /* 轮播图圆点样式 */
  26. .banner-container a {
  27.         width:24px;
  28.         height:24px;
  29.         background:#87c8eb;
  30.         position: absolute;
  31.         bottom:1rem;
  32.         border-radius: 100%;
  33.         margin:0;
  34.         z-index: 1;
  35. }
  37. .banner-container input{
  38.         width:24px;
  39.         height:24px;
  40.         position: absolute;
  41.         bottom:1rem;
  42.         margin:0;
  43.         cursor: pointer;
  44.         z-index: 2;
  45.         opacity: 0;
  46. }
  48. /* 设置导航圆点偏移量（居中布局）*/
  49. #banner-control-1,#banner-control-1 + .banner-nav-a{
  50.     left: 30%;
  51. }
  52. #banner-control-2,#banner-control-2 + .banner-nav-a{
  53.     left: 40%;
  54. }
  55. #banner-control-3,#banner-control-3 + .banner-nav-a{
  56.     left: 50%;
  57. }
  58. #banner-control-4,#banner-control-4 + .banner-nav-a{
  59.     left: 60%;
  60. }
  61. #banner-control-5,#banner-control-5 + .banner-nav-a{
  62.     left: 70%;
  63. }
  65. /* 设置高亮 */
  66. /*当 input 被选中时 他的兄弟级a标签高亮展示*/
  67. input:checked + .banner-nav-a {
  68.     background-color: #ad244f;
  69. }
  71. /* 设置轮播图动画 */
  72. #banner-control-1:checked ~ .banner-img-container{
  73.         transform: translateX(0px);
  74. }
  75. #banner-control-2:checked ~ .banner-img-container{
  76.         transform: translateX(-1200px);
  77. }
  78. #banner-control-3:checked ~ .banner-img-container{
  79.         transform: translateX(-2400px);
  80. }
  81. #banner-control-4:checked ~ .banner-img-container{
  82.         transform: translateX(-3600px);
  83. }
  84. #banner-control-5:checked ~ .banner-img-container{
  85.         transform: translateX(-4800px);
  86. }
复制代码
3.补充内容

末了附布局引用图

css文件引用


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

来自云龙湖轮廓分明的月亮

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表