html+css布局轮播图

码农NoError

于 2024-08-29 14:43:30 发布

阅读量428

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/zhangzhaoyuxunlei/article/details/141678521

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .swiper {
        position: relative;
        width: 875px;
        height: 492px;
        border: 1px solid lightcoral;
        overflow: hidden;
        font-size: 0;
      }
      .swiper .items {
        height: 100%;
        white-space: nowrap;
        transform: translateX(-875px);
      }
      .swiper .items img{
        transition: all 0.5s;
      }
      .swiper:hover .items .active{
        transform: scale(1.05);
      }
      .swiper .points {
        font-size: 16px;
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
      .swiper .points span {
        display: inline-block;
        margin-right: 10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        font-weight: bold;
        color: white;
        background-color: lightblue;
        text-align: center;
      }
      .swiper .points .active {
        background-color: lightcoral;
        color: black;
        width: 40px;
      }
      .swiper:hover .prev, .swiper:hover .next{
        display: block;
      }
      .swiper .next,
      .swiper .prev {
        width: 34px;
        height: 73px;
        position: absolute;
        top: calc(50% - 37px);
        display: none;
      }
      .swiper .prev {
        left: 20px;
        background-image: url(./img/left.png);
      }
      .swiper .next {
        right: 20px;
        background-image: url(./img/right.png);
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <div class="content">
        <div class="items">
          <img src="./img/1.jpg" alt="" />
          <img class="active" src="./img/2.jpg" alt="" />
          <img src="./img/3.jpg" alt="" />
          <img src="./img/4.jpg" alt="" />
          <img src="./img/5.jpg" alt="" />
        </div>
      </div>
      <div class="points">
        <span>1</span>
        <span class="active">2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
      </div>
      <div class="prev"></div>
      <div class="next"></div>
    </div>
  </body>
</html>