全屏轮播图

作者: 卷心菜呀 | 来源:发表于2020-11-13 14:59 被阅读0次

全屏轮播图
jQuery相关插件
【003】设计小白如何制作全屏大图背景？
一个不显示全屏图的banner无限自动轮播例子，利用recycl
Flutter（二十一）：轮播图
Swiper轮播图不全屏展示
jQuery页面滑动插件，支持全屏滚动和轮播图
iOS-定时器相关
JesseYang的个人博客小程序需求列表
无标题文章

全屏轮播图step1
HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id="container" class="container">
            <div id="images" class="images">
                <img class="bk" src="./images/01.jpg" alt=""/>
                <img class="bk" src="./images/02.jpg" alt=""/>
                <img class="bk" src="./images/03.jpg" alt=""/>
                <img class="bk" src="./images/04.jpg" alt=""/>

            </div>
<!--            <div id="operation" class="operation">
                <ul class="potlist">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <p id="prev" class="leftRow"></p>
                <p id="next" class="rightRow"></p>
            </div> -->
        </div>
    </body>
</html>

CSS样式

body{
    margin: 0;
    padding: 0;
}


/*图片外层*/
.container{
    /*设置相对布局，显示一张图片大小，其余图片隐藏起来*/
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/*图片组层*/
.images{
    /*绝对布局，高度为图片高度，长度为所有图片长度之和*/
    position: absolute;
    width: 400%;
    height: 100%;
    display: inline-block;
    /*text-align: center;*/
    z-index: 1;
}

/*每一张图片*/
.bk{
    float: left;
    position: absolute;
    width: 25%;
    height: 100%;
    display: inline-block;
}