CSS & JS 制作滚动幻灯片

Posted 2020-08-14 woider

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS & JS 制作滚动幻灯片相关的知识，希望对你有一定的参考价值。

==================纯CSS方式====================

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            .show-box {
                height: 800px;
                /*背景固定*/
                background-attachment: fixed;
                /*图像居中*/
                background-position: center;
                /*背景遮盖*/
                background-size: cover;
            }
        </style>
    </head>

    <body>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/GreaterFlamingos_ZH-CN13656214069_1920x1080.jpg);">
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/LacsdesCheserys_ZH-CN10032851647_1920x1080.jpg);">
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/MadeiraTrails_ZH-CN11087101725_1920x1080.jpg);">
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/VaranasiBoat_ZH-CN8290748524_1920x1080.jpg);">
        </div>
    </body>

</html>

仔细看背景切换的方式，是不是类似于层叠起来的效果，这全依赖于CSS3的background-attachment: fixed;样式，它的作用是将背景图像固定在窗口中，于是背景就不会随着页面滚动啦，虽然原理很简单，但效果很漂亮呢。

唯一的不足是，每一个div的高度是固定的，对于不同的显示器呈现的效果可能会不一样，所以接下来我们使用javascript来对页面进行优化。

==================CSS&JS方式==================

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            .show-box {
                /*与body高度一致*/
                height: 100%;
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var body = document.getElementsByTagName("body")[0];
                body.style.height = window.innerHeight + "px"; //设置body高度

                var new_pos, old_pos = 0;

                /*页面滚动事件*/
                window.onscroll = function() {
                    var screen = window.innerHeight; //窗口内部高度
                    var scroll = document.body.scrollTop; //获取页面滚动高度
                    if(scroll == 0) { //初始化滚动位置
                        old_pos = 0;
                    }
                    if((scroll % screen) + 50 > screen) { //滚动至接近位置时
                        new_pos = Math.ceil(scroll / screen);
                        if(new_pos != old_pos) {
                            document.body.scrollTop = new_pos * screen; //滚动到最合适的位置
                        }
                        old_pos = new_pos;
                    }
                }
            }
        </script>
    </head>

    <body>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/GreaterFlamingos_ZH-CN13656214069_1920x1080.jpg);">
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/LacsdesCheserys_ZH-CN10032851647_1920x1080.jpg);">
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/MadeiraTrails_ZH-CN11087101725_1920x1080.jpg);">
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/VaranasiBoat_ZH-CN8290748524_1920x1080.jpg);">
        </div>
    </body>

</html>

通过JavaScript会自动调整展示区的大小，并且能在滚动的同时自动展示，由于这种体验不太好展示，这里就不截图了，运行这里的代码就能看到效果了。

这种方式还可以再继续优化，比如让JavaScript的自动滚动更加平缓，可以使用JQuery实现，这里就不继续深究了。

==================幻灯片效果==================

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
                font-family: "微软雅黑";
            }
            
            .show-box {
                height: 100%;
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
            }
            
            .show-text {
                width: 50%;
                height: auto;
                padding: 20px;
                background-color: rgba(0, 0, 0, 0.6);
                position: absolute;
                bottom: 0px;
            }
            
            .show-text h2 {
                color: white;
                font-size: 18px;
            }
            
            .show-text p {
                color: white;
                line-height: 1.5em;
                font-size: 14px;
                margin: 10px 0px;
            }
            
            .show-text a {
                color: white;
                padding: 6px 12px;
                border: 1px solid white;
                background: none;
                display: inline-block;
                text-decoration: none;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var body = document.getElementsByTagName("body")[0];
                body.style.height = window.innerHeight + "px";

                var new_pos, old_pos = 0;

                /*页面滚动事件*/
                window.onscroll = function() {
                    var screen = window.innerHeight;
                    var scroll = document.body.scrollTop;
                    if(scroll == 0) {
                        old_pos = 0;
                    }
                    if((scroll % screen) + 50 > screen) {
                        new_pos = Math.ceil(scroll / screen);
                        if(new_pos != old_pos) {
                            document.body.scrollTop = new_pos * screen;
                        }
                        old_pos = new_pos;
                    }
                }
            }
        </script>
    </head>

    <body>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/GreaterFlamingos_ZH-CN13656214069_1920x1080.jpg);">
            <div class="show-text" style="left: 0px;">
                <h2>粉红色的鸟精灵</h2>
                <p>要说自然界什么动物最让人眼前一“亮”，那肯定要数大火烈鸟了。这个周身红色的大型鹳鸟，总是用一种给人感觉高傲的身姿伫立在水间，十分耀眼。这些披着红色大衣的鸟类时而在水中游泳，时而徜徉在浅滩，悠闲安详的神态给人感觉高傲而不可接近。</p>
                <a href="##">大火烈鸟</a>
            </div>
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/LacsdesCheserys_ZH-CN10032851647_1920x1080.jpg);">
            <div class="show-text" style="right: 0px;">
                <h2>欧洲屋脊下的小镇</h2>
                <p>虽然雪总是会带给人寒冷的感觉，但是雪山却是让人感叹不已的美丽景观。看这纯白美丽的雪山，气势磅礴，玲珑秀丽，仿佛可以让周围的一切都染上白色的外衣。山脚下静谧的湖水也不由的被这美丽所折服，映出雪山的娇媚身姿。白与蓝的搭配，让人看了心醉。</p>
                <a href="##">霞慕尼</a>
            </div>
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/MadeiraTrails_ZH-CN11087101725_1920x1080.jpg);">
            <div class="show-text" style="left: 0px;">
                <h2>不可错过的火山岛</h2>
                <p>在非洲西海岸，坐落着有着“大西洋明珠”美誉的马德拉群岛，它隶属于葡萄牙。这是一座秀丽的火山岛，可供人登陆的部分是整个火山区的四分之一。岛上覆盖着密林，有着无数僻静的山间小径，这里还有被列入联合国世界遗产的月桂树林生态系统，是个适合徒步旅行的岛屿。</p>
                <a href="##">马德拉群岛</a>
            </div>
        </div>
        <div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/VaranasiBoat_ZH-CN8290748524_1920x1080.jpg);">
            <div class="show-text" style="right: 0px;">
                <h2>踏足古老而神秘的印度</h2>
                <p>印度是个古老而神秘的国度，这里的人们尊称恒河为“圣河”和“印度的母亲”。虔诚的印度教徒一生至少必须到恒河净身一次。所以千百年来，朝圣者的足迹遍布了恒河两岸。众多神话故事和宗教传说也以这里为背景，形成了独特的风土人情。</p>
                <a href="##">瓦拉纳西</a>
            </div>
        </div>
    </body>

</html>

幻灯片展示

以上是关于CSS & JS 制作滚动幻灯片的主要内容，如果未能解决你的问题，请参考以下文章