CSS入门篇15.轮播图的三种实现方法

百科大全

更新时间：2025-10-05 13:57:0134

admin管理员组
文章数量:1794759

CSS入门篇15.轮播图的三种实现方法

第一种：用float <!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>Document</title> <style> *{ padding: 0; margin: 0; list-style: none; text-decoration: none; } #wrap{ width: 590px; height: 470px; border: 10px solid orange; overflow: hidden; position: relative; } ul{ width: 2360px; } ul>li{ float: left; } .pot{ position: absolute; width: 100px; height: 20px; background-color: red; bottom: 30px; left: 30px; } </style> </head> <body>  <div id="wrap">  <ul> <li> <a href="#"> <img src="./img/1.jpg" alt="" /> </a> </li> <li> <a href="#"> <img src="./img/2.jpg" alt="" /> </a> </li> <li> <a href="#"> <img src="./img/3.jpg" alt="" /> </a> </li> <li> <a href="#"> <img src="./img/4.jpg" alt="" /> </a> </li> </ul>  <div class="pot"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>  </div> </body> </html> 第二种：用定位 <!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>Document</title> <style> * { padding: 0; margin: 0; list-style: none; text-decoration: none; } #wrap{ position: relative; height: 470px; width: 590px; } ul>li{ position: absolute; } ul>li:nth-child(4){ z-index: 3; } /*设置小圆点 */ .pot { position: absolute; bottom: 20px; left: 30px; z-index: 999; } .pot > a { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); border: 3px solid rgba(0, 0, 0, 0.05); } .pot > a:hover { background-color: white; border: 3px solid red; } </style> </head> <body>  <div id="wrap">  <ul> <li> <a href="#"> <img src="./img/1.jpg" alt="" /> </a> </li> <li> <a href="#"> <img src="./img/2.jpg" alt="" /> </a> </li> <li> <a href="#"> <img src="./img/3.jpg" alt="" /> </a> </li> <li> <a href="#"> <img src="./img/4.jpg" alt="" /> </a> </li> </ul>  <div class="pot"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> </body> </html> 第三种：用插件 <!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>Document</title>  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />  <script src="./swiper/swiper-bundle.min.js"></script> <style> .swiper { width: 570px; height: 490px; position: relative; overflow: hidden; } .swiper-pagination { bottom: 30px !important; } .swiper { --swiper-theme-color: #ff6600; /* 设置Swiper风格 */ --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */ --swiper-navigation-size: 50px; /* 设置按钮大小 */ } </style> </head> <body> <div class="swiper">  <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./img/1.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./img/2.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./img/3.jpg" alt="" /> </div> </div>  <div class="swiper-pagination"></div>  <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> var mySwiper = new Swiper(".swiper", { // 设置图片的切换模式 effect: "cube", // 设置自动切换的时间 autoplay: { delay: 5000, }, loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: ".swiper-pagination", }, // 如果需要前进后退按钮 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // 如果需要滚动条 scrollbar: { el: ".swiper-scrollbar", }, }); </script>  </body> </html>

总结下来，轮播图：

一般分为两类

一、自己手写（配合js,目前的话，大家掌握原理和样式）

1、用float为主

建一个对外的窗口，让图片整个横向排列，通过调整整个图片的水平方向，

来显示对应的图片

2、用定位为主

让图片叠在一起，通过改变图片的层级，来决定显示哪张图片

二、用各种插件、或者框架（别人写的，你来用）

本文标签：三种方法入门篇 css 轮播图

版权声明：本文标题：CSS入门篇15.轮播图的三种实现方法内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973742a124222.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。