使用css实现简易轮播图效果

最新推荐文章于 2023-11-04 12:29:48 发布

weixin_47304385

最新推荐文章于 2023-11-04 12:29:48 发布

阅读量130

点赞数

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

本文链接：https://blog.csdn.net/weixin_47304385/article/details/125132071

版权

css页面布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、首先可以给盒子添加浮动属性或者设置flex使其在一行内显示
然后在父盒子设置overflow:hidden;超出影藏把多于图片藏起来。
二、利用a标签使用锚点连接来实现跳转效果
三、给父盒子添加scorll-behavior:smooth; 这样可以使跳转变慢一点来增加用户体验。

参考代码

<style>
        .con {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 100px auto;
        }
        
        .con .imgs {
            display: flex;
            overflow: hidden;
            width: 100%;
            height: 100%;
            scroll-behavior: smooth;
        }
        
        .btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
        
        .btn a {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: rgba(00, 00, 00, 0.3);
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div class="con">
        <div class="imgs">
            <img src="images/1.jpg" alt="" id="box1">
            <img src="images/2.jpg" alt="" id="box2">
            <img src="images/3.jpg" alt="" id="box3">
        </div>
        <div class="btn">
            <a href="#box1">1</a>
            <a href="#box2">2</a>
            <a href="#box3">3</a>
        </div>
    </div>
</body>