利用css完成轮播图效果

最新推荐文章于 2024-06-29 11:45:56 发布

oopsWeb!

最新推荐文章于 2024-06-29 11:45:56 发布

阅读量812

点赞数 2

分类专栏：页面布局文章标签： css3 html html5

本文链接：https://blog.csdn.net/m0_52725909/article/details/117046360

版权

页面布局专栏收录该内容

16 篇文章 0 订阅

订阅专栏

利用css完成轮播图效果方法很简单

一、首先可以给图片盒子加浮动或者flex让其在一行内显示，再给父盒子添加overflow:hidden;属性让超出的图片隐藏起来。

二、利用a标签的跳转效果，给对应的图片盒子设置ID属性值，
将图片盒子的ID属性值加入对应的a标签中的href属性中
例如 <a href="#box1> </a>，

三、当我们点击a标签时，它就会跳转到对应的图片，由此可以完成简单的轮播图效果。

给父盒子添加scroll-behavior: smooth;这个属性可减慢图片跳转速度

下面参考代码：

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin: 200px auto;
      width: 520px;
      height: 280px;
      border: 1px solid #000;
      position: relative;
    }

    ul {
      display: flex;
      overflow: hidden;
      scroll-behavior: smooth;
    }

    li {
      list-style: none;
    }

    p {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    p a {
      display: inline-block;
      width: 40px;
      height: 40px;
      color: #fff;
      font-size: 20px;
      text-decoration: none;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li id="box1"><img src="images/1.jpg" alt=""></li>
      <li id="box2"><img src="images/2.jpg" alt=""></li>
      <li id="box3"><img src="images/3.jpg" alt=""></li>
    </ul>
    <p><a href="#box1">1</a><a href="#box2">2</a><a href="#box3">3</a></p>
  </div>
</body>

oopsWeb!

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用css完成轮播图效果

利用css完成轮播图效果方法很简单，下面先看代码 <style> * { margin: 0; padding: 0; } div { margin: 200px auto; width: 520px; height: 280px; border: 1px solid #000; position: relative; } ul { display: fl
复制链接

扫一扫

专栏目录