最近在jquery库中看到有人封装了整屏滚动(fullpage)的插件,感觉还挺有意思,然后想了一下怎么用原生js 实现

本文的实例讲述了原生javascript实现全屏滚动功能分享大家参考,具体如下

1. 计算当前浏览器屏幕高度,每次翻页显示内容高度即为屏幕高度

2. 对鼠标滚轮事件进行监听,注意滚轮事件浏览器兼容问题

效果图如下

目录

 一、先看看页面布局

html部分

css部分

js部分

二、代码总结


 一、先看看页面布局

html部分

<div class="container">
        <div class="section section1">
            <h1>第1屏</h1>
        </div&gt;
        <div class="section section2"&gt;
            <h1>第2屏</h1>
        </div>
        <div class="section section3">
            <h1>第3屏</h1>
        </div>
        <div class="section section4">
            <h1>第4屏</h1>
        </div>
        <div class="section section5">
            <h1>第5屏</h1>
        </div>
    </div>

    <ul class="controls">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

css部分

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 500%;
            position: absolute;
            top: 0;
            transition: all 0.3s ease;
        }


        .section1 {
            background-color: rebeccapurple;
            background: url(./轮播图/img/01.jpg);

        }

        .section2 {
            background-color: skyblue;
            background: url(./轮播图/img/02.jpg);

        }

        .section3 {
            background-color: red;
            background: url(./轮播图/img/03.jpg);

        }

        .section4 {
            background-color: orange;
            background: url(./轮播图/img/04.jpg);

        }

        .section5 {
            background-color: lightgreen;
            background: url(./轮播图/img/05.jpg);

        }

        .section {
            width: 100%;
            height: 20%;
            display: flex;
            color: white;
            justify-content: center;
            align-items: center;
            background-size: cover;
        }


        .controls {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            list-style: none;
        }

        .controls li {
            width: 50px;
            height: 50px;
            font: bold 22px/50px '宋体';
            text-align: center;
            background-color: #000;
            color: white;
            cursor: pointer;
            border-radius: 50%;
        }

        .controls li+li {
            margin-top: 5px;
        }

        .controls li.active {
            background-color: #fff;
            color: red;
        }
    </style>

图片可以换成自己喜欢的图片

js部分

主要核心部分

 //实现滚动效果
        const container = document.querySelector('.container')
        const lis = document.querySelectorAll('.controls li') 
        var viewHeight = null //声明页面高度

        var index = 0; //当前索引
        var flag = true; //节流开关
        document.addEventListener('mousewheel', function (e) {
            e = e || window.event
            console.log(e);
            // 获取整屏的高度
            viewHeight = document.body.clientHeight;
            if (flag) {  //节流阀
                flag = false
                if (e.wheelDelta > 0) {
                    index--
                    if (index < 0) {
                        index = 0
                    }
                } else {
                    index++;
                    if (index > lis.length - 1) {
                        index = lis.length - 1
                    }
                }
                container.style.top = -index * viewHeight + 'px'
                changeColor(index)
                setTimeout(function () {
                    flag = true
                }, 500)
            }

        })

这里是本案例核心函数部分,1.给页面绑定鼠标滚轮事件,对鼠标滚轮事件进行监听

通过事件对象event的wheelDelta属性值来判断鼠标滚动方向

 wheelDelta的值为正的话说明鼠标向上滚动,值为负说明鼠标向下滚动

2.这里使用一个节流阀防止鼠标滚动过快导致屏幕滚动过快,用了一个开关思想,当鼠标触发滚动事件的时候将开关关闭,用延时定时器将开关打开

小li颜色切换部分

 //绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                viewHeight = document.body.clientHeight
                index = i
                changeColor(index)
                container.style.top = -index * viewHeight + 'px'
            }
        }
        //改变小li颜色
        function changeColor(index) {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ''
            }
            lis[index].className = 'active'
        }

封装一个改变小li颜色的函数通过传入索引,改变当前索引的小li类名然后循环给小li绑定点击事件,这里使用let关键字的特点,具有块级作用域保存每个小li的索引值,点击后将i值赋值全局index保存索引。通过每次移动当前索引乘以整个屏幕的高度来实现滚动整个屏幕

因为考虑兼容性问题,在点击小li或者滚动鼠标滚轮时重新获取一次整个屏幕的高度。防止因实时性出现问题

二、代码总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 500%;
            position: absolute;
            top: 0;
            transition: all 0.3s ease;
        }


        .section1 {
            background-color: rebeccapurple;
            background: url(./轮播图/img/01.jpg);

        }

        .section2 {
            background-color: skyblue;
            background: url(./轮播图/img/02.jpg);

        }

        .section3 {
            background-color: red;
            background: url(./轮播图/img/03.jpg);

        }

        .section4 {
            background-color: orange;
            background: url(./轮播图/img/04.jpg);

        }

        .section5 {
            background-color: lightgreen;
            background: url(./轮播图/img/05.jpg);

        }

        .section {
            width: 100%;
            height: 20%;
            display: flex;
            color: white;
            justify-content: center;
            align-items: center;
            background-size: cover;
        }


        .controls {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            list-style: none;
        }

        .controls li {
            width: 50px;
            height: 50px;
            font: bold 22px/50px '宋体';
            text-align: center;
            background-color: #000;
            color: white;
            cursor: pointer;
            border-radius: 50%;
        }

        .controls li+li {
            margin-top: 5px;
        }

        .controls li.active {
            background-color: #fff;
            color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="section section1">
            <h1>第1屏</h1>
        </div>
        <div class="section section2">
            <h1>第2屏</h1>
        </div>
        <div class="section section3">
            <h1>第3屏</h1>
        </div>
        <div class="section section4">
            <h1>第4屏</h1>
        </div>
        <div class="section section5">
            <h1>第5屏</h1>
        </div>
    </div>

    <ul class="controls">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        //实现滚动效果
        const container = document.querySelector('.container')
        const lis = document.querySelectorAll('.controls li') 
        var viewHeight = null //声明页面高度

        var index = 0; //当前索引
        var flag = true; //节流开关
        document.addEventListener('mousewheel', function (e) {
            e = e || window.event
            console.log(e);
            // 获取整屏的高度
            viewHeight = document.body.clientHeight;
            if (flag) {  //节流阀
                flag = false
                if (e.wheelDelta > 0) {
                    index--
                    if (index < 0) {
                        index = 0
                    }
                } else {
                    index++;
                    if (index > lis.length - 1) {
                        index = lis.length - 1
                    }
                }
                container.style.top = -index * viewHeight + 'px'
                changeColor(index)
                setTimeout(function () {
                    flag = true
                }, 500)
            }

        })

        //绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                viewHeight = document.body.clientHeight
                index = i
                changeColor(index)
                container.style.top = -index * viewHeight + 'px'
            }
        }
        //改变小li颜色
        function changeColor(index) {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ''
            }
            lis[index].className = 'active'
        }
    </script>
</body>

</html>

感谢大家浏览!!!

原文地址:https://blog.csdn.net/qq_61955502/article/details/127936601

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_15929.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注