手动轮播图(纯css实现)

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

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

手动轮播图(纯css实现)_第1张图片

代码:

        
1
2
3
4

 

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;

            }
        }
    }

最后效果:

手动轮播图(纯css实现)_第2张图片

 

你可能感兴趣的:(图片滚动,图片轮播,HTML,&,CSS)