手动轮播图（纯css实现）

淡淡的烟草味﹌ 2022-01-17 02:47 484阅读 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 条评论，484人围观）

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

相关阅读

相关纯css轮播图

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

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

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

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

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

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

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

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

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

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

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

相关 html图片轮播带滚动条,纯CSS手动滑动轮播图（隐藏滚动条）

本文给大家介绍纯CSS手动滑动轮播图(隐藏滚动条)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 HTML： ![dongtai.png][] ![d

客官°小女子只卖身不卖艺/ 2022年10月06日 07:49/ 0 赞/ 118 阅读

相关纯css自动全屏轮播图html代码,纯HTML和CSS实现JD轮播图效果

使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。 ![d8d437dd9cedc4fb19eaf94849257104.png][] !

骑猪看日落/ 2022年10月05日 15:55/ 0 赞/ 196 阅读

相关纯css实现轮播图

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

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

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

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

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

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

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

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

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

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

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