纯css实现轮播图

最新推荐文章于 2024-01-29 09:00:00 发布

bbkkkk

最新推荐文章于 2024-01-29 09:00:00 发布

阅读量127

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/bbkkkk/article/details/130196146

版权

在使用bootstrap成熟组件后发现，整个界面就一个轮播图用到bootsrap，引入了样式文件和js，局部样式的效果还被bootstrap样式覆盖，自己用纯css实现了个效果；

引入了开源的图标库 fontawesome

<!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>
    <link rel="stylesheet" href="./asserts/css/external.css" type="text/css" media="all" />
  </head>
  <!-- style 里面是css样式 因为代码较少就没有再次创建 -->
  <style>
    /* 盒子1的样式 */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .slides {
      position: relative;
      width: 400px;
      height: 280px;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #fff;
      overflow: hidden;
    }
    @media (max-width: 767px) {
      .slides {
        width: calc(100vw);
      }
    }
    .slide {
      margin: 0;
      padding: 0;
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Helvetica;
      font-size: 120px;
      color: #fff;
      transition: 0.5s transform ease-in-out;
    }

    .slide:nth-of-type(1) {
      left: 0%;
    }

    .slide:nth-of-type(2) {
      /* background-color: #f25c05; */
      left: 100%;
    }

    .slide:nth-of-type(3) {
      /* background-color: #495f8c; */
      left: 200%;
    }

    input[type="radio"] {
      position: relative;
      z-index: 100;
      display: none;
    }

    .controls-visible {
      position: absolute;
      width: 100%;
      bottom: 5px;
      text-align: center;
    }

    .controls-visible label {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      margin: 0 3px;
      border: 2px solid #fff;
    }

    .slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1) {
      background-color: #333;
    }

    .slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2) {
      background-color: #333;
    }

    .slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3) {
      background-color: #333;
    }

    .slides input[type="radio"]:nth-of-type(1):checked ~ .slide {
      transform: translatex(0%);
    }

    .slides input[type="radio"]:nth-of-type(2):checked ~ .slide {
      transform: translatex(-100%);
    }

    .slides input[type="radio"]:nth-of-type(3):checked ~ .slide {
      transform: translatex(-200%);
    }

    /* Left/Right Button Classes Below */

    .navigator {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      width: 100%;
      z-index: 100;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      display: none;
    }

    .navigator i {
      font-size: 32px;
      color: rgb(218, 200, 200);
      cursor: pointer;
    }

    .slides input[type="radio"]:nth-of-type(1):checked ~ .navigator:nth-of-type(1) {
      display: flex;
    }

    .slides input[type="radio"]:nth-of-type(2):checked ~ .navigator:nth-of-type(2) {
      display: flex;
    }

    .slides input[type="radio"]:nth-of-type(3):checked ~ .navigator:nth-of-type(3) {
      display: flex;
    }
    .slides .content {
      position: relative;
      width: 400px;
      height: 280px;
    }

    .slides .content .img {
      position: absolute;
      text-align: center;
      width: 400px;
      height: 280px;
    }
    /* css注释说明： 背景为红色 */

    .slides .content .title {
      position: absolute;
      bottom: 25px;
      width: 400px;
      height: 20px;
      background-color: rgba(235, 223, 223, 0.3);
      text-align: center;
      color: white;
      font-weight: 600;
      font-size: 14px;
    }
  </style>
  <body>
    <div>
      <ul class="slides">
        <input type="radio" id="control-1" name="control" checked />
        <input type="radio" id="control-2" name="control" />
        <input type="radio" id="control-3" name="control" />

        <!--  Left/Right Button  -->
        <div class="navigator slide-1">
          <label for="control-3">
            <i class="fa fa-chevron-left"></i>
          </label>
          <label for="control-2">
            <i class="fa fa-chevron-right"></i>
          </label>
        </div>

        <div class="navigator slide-2">
          <label for="control-1">
            <i class="fa fa-chevron-left"></i>
          </label>
          <label for="control-3">
            <i class="fa fa-chevron-right"></i>
          </label>
        </div>

        <div class="navigator slide-3">
          <label for="control-2">
            <i class="fa fa-chevron-left"></i>
          </label>
          <label for="control-1">
            <i class="fa fa-chevron-right"></i>
          </label>
        </div>
        <!--  /Left/Right Button  -->
        <li class="slide">
          <a href="javascript:void(0)">
            <div class="content">
              <div class="img"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" alt="" /></div>
              <div class="title">绿色</div>
            </div>
          </a>
        </li>
        <li class="slide">
          <a href="javascript:void(0)">
            <div class="content">
              <div class="img"><img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" alt="" /></div>
              <div class="title">蓝色</div>
            </div>
          </a>
        </li>
        <li class="slide">
          <a href="javascript:void(0)">
            <div class="content">
              <div class="img"><img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="" /></div>
              <div class="title">黄色</div>
            </div>
          </a>
        </li>
        <div class="controls-visible">
          <label for="control-1"></label>
          <label for="control-2"></label>
          <label for="control-3"></label>
        </div>
      </ul>
    </div>
  </body>
</html>