手动轮播图（纯css实现）

淡淡的烟草味﹌ 2022-01-17 02:47 589阅读 0赞

> 在一些app上，我们经常能见到一些向左滑向右滑显示更多图片的样式，今天与大家分享一下这种手动轮播图的制作方法，只需要css就好。

核心思想：利用超出部分滚动原理，在固定的宽高之中，设置子元素超出固定宽高，再次在子元素的基础上设置新的内容和设置宽高。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

代码：

<div class="bigd">
                <div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                </div>
            </div>

css代码，用到了sass，转换成css就是括号中的是它的子元素

.bigd{
            height: 20%;
            width: 100%;
            overflow-x: scroll;
            border: 1px solid red;
            box-sizing: border-box;
            div{
                width: 300%;
                height: 90%;
                border: 1px solid black;
    
                div{
                    width: 25%;
                    height: 90%;
                    border: 1px solid blue;
                    float: left;
                    box-sizing: border-box;
    
                }
            }
        }

最后效果：

![20190612183301711.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220117/e37b5a68a38e4807b8290da0ec24c13b.png
[20190612183301711.gif]: /images/20220117/3063c7202e2b4845933dd13d4c440fc1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，589人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css轮播图

*代码简单明了。有问题留言小编** 在这里插入<!DOCTYPE html> <html lang="zh"> <head> <met...

梦里梦外;/ 2024年04月17日 20:25/ 0 赞/ 82 阅读

相关纯CSS实现轮播图------Sestid

效果展示： ![在这里插入图片描述][20191103200824540.gif] 代码： <!DOCTYPE html> <html>

淩亂°似流年/ 2023年05月29日 05:01/ 0 赞/ 27 阅读

相关如何用纯CSS实现轮播图效果

如何用纯CSS实现轮播图效果 1 问题描述当我们在学习JavaScript的时候，会学习怎么实现一个轮播图，但是如果不使用JavaScript能不能实现轮播

- 日理万妓/ 2023年01月19日 14:52/ 0 赞/ 19 阅读

相关轮播图实现（手动+自动）

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

冷不防/ 2022年12月11日 13:33/ 0 赞/ 303 阅读

相关纯css实现超级简单的轮播图

随着现在信息的高速发展，互联网时代也来到了物联网时代，相信当今世上，没有人会没有使用过淘宝，京东，天猫等购物平台，那么你们一定会发现，不止是这些购物网站，还有很多的一些官网，网

绝地灬酷狼/ 2022年12月05日 10:26/ 0 赞/ 205 阅读

相关 c语言实现图片轮播,纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动，这样就实现了轮

阳光穿透心脏的1/2处/ 2022年10月15日 05:53/ 0 赞/ 286 阅读

相关纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 <div class="main"> <div class="div-main"></div>

左手的ㄟ右手/ 2022年07月11日 15:22/ 0 赞/ 260 阅读

相关纯css3实现无缝轮播图效果

主要就是利用css3中的动画了，看完整实现代码如下： <!DOCTYPE html> <html lang="en"> <head>

迷南。/ 2022年05月14日 10:06/ 0 赞/ 274 阅读

相关纯css3实现的轮播图效果（表单制作轮播图）

主要是使用css3新增的伪类选择器，利用表单制作的轮播图效果，效果图如下所示 ![70][] 完整代码如下： <!DOCTYPE html> <html

我就是我/ 2022年05月14日 09:56/ 0 赞/ 322 阅读

相关手动轮播图（纯css实现）

> 在一些app上，我们经常能见到一些向左滑向右滑显示更多图片的样式，今天与大家分享一下这种手动轮播图的制作方法，只需要css就好。核心思想：利用超出部分滚动原理，在固定的

淡淡的烟草味﹌/ 2022年01月17日 02:47/ 0 赞/ 590 阅读