2023-03-22_DOMDAY07-滚动条以及轮播

作者: 远方的路_ | 来源:发表于2023-03-22 11:19 被阅读0次

1. 添加自定义滚动条

页面的最外层是document,紧接着是初始包含块，html， body，其次是我们的元素，禁止了系统的滚动条，（因为各大浏览器的系统滚动条风格不一，有可能会影响我们的页面布局），所以在body当中我们一般会有最外的一个盒子模拟body区域，在这个盒子的右侧会定位一个盒子模拟滚动条

滚动条长度设置（注意样式中原本定死的滚动条）
- 自定义滚动条的万能比例：
  滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度 = 滑块滚动距离 / 内容的滚动距离
- 滚动条和内容联动（注意方向）

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>滚动条-滚动条联动内容</title>
        <style>
            * {
                margin: 0;
                padding: 0;            
            }

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

            /* body同宽同高 */
            .wrapper {
                position: relative;
                height: 100%;
                width: 100%;
            }
            .wrapper .scroll {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 30px;
                border-left: 1px solid #666;
                border-right: 1px solid #666;
                background-color: aquamarine;
            }

            .wrapper .scroll .scrollIn {
                position: absolute;
                /* height: 100px; */
                width: 30px;
                background-color: tomato;
            }

            .wrapper .content {
                position: absolute;
            }
        </style>

    </head>
    <body>
        <div class="wrapper">
            <!-- 内容区 -->
            <div class="content"></div>

            <!-- 滑槽 -->
            <div class="scroll">
                <!-- 滑块 -->
                <div class="scrollIn">

                </div>
            </div>
        </div>

        <script>
            // 1.拖拽滚动条
            // 2.边界
            // 3.生成内容
            // 4.滑块联动内容
            // 5.滚轮联动滑块
            // 6.滚轮联动内容
            var scrollIn = document.querySelector('.wrapper .scroll .scrollIn');
            var content = document.querySelector('.wrapper .content');

            // 内容
            for(var i = 1; i <= 200; i++){
                content.innerHTML += i + '<br>';
            }
            // 因为不涉及滑动  所以在哪写都可以
            // 根据内容展示滑块的高度
            // 滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度

            // 滑块的高度        滑槽的高度
            // ---------    =  -----------
            // 滑槽的高度        内容的高度

            // 滑块的高度  = (滑槽的高度 / 内容的高度 ) * 滑槽的高度

            // (滑槽的高度 / 内容的高度 )
            var scale = document.documentElement.clientHeight / content.clientHeight;

            //  (滑槽的高度 / 内容的高度 ) * 滑槽的高度
            var scrollIn_h = scale * document.documentElement.clientHeight;

            scrollIn.style.height = scrollIn_h + 'px';

            // 滑槽和滑块
            scrollIn.onmousedown = function(event){
                var eleY = scrollIn.offsetTop;

                var startY = event.clientY;

                document.onmousemove = function(event){
                    var endY = event.clientY;

                    var disY = endY - startY;

                    var lastY = disY + eleY;

                    // 边界
                    if(lastY >= document.documentElement.clientHeight - scrollIn.clientHeight){
                        lastY = document.documentElement.clientHeight - scrollIn.offsetHeight;
                    }else if(lastY <= 0){
                        lastY = 0;
                    }

                    scrollIn.style.top = lastY + 'px';

                    // 滑块动完了之后 内容跟着动
                    // 滑槽的高度 / 内容的高度 = 滑块滚动距离--滑块的最终位置 / 内容的滚动距离 

                    // 内容的滚动距离 = 滑块滚动距离 / (滑槽的高度 / 内容的高度)
                    var content_h = lastY / scale;
                    content.style.top = -content_h + 'px';

                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
            }
        </script>
    </body>
</html>

2. 滚轮事件基础

区分上下

ie/chrome : mousewheel(dom2的标准模式)
- event.wheelDelta
- 上：120
- 下：-120
  - 上和下指的是滚轮的方向
firefox: DOMMouseScroll(dom2的标准模式)
- event.detail
- 上：-3
- 下：3
  - 上和下指的是滚轮的方向

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>02_滚动条-静态页面搭建</title>
        <style>
            * {
                margin: 0;
                padding: 0;            
            }
            html,body {
                height: 100%;
                overflow: hidden; 
            }
            /* body同宽同高 */
            .wrapper {
                position: relative;
                height: 100%;
                width: 100%;
            }
            .wrapper .scroll {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 30px;
                border-left: 1px solid #666;
                border-right: 1px solid #666;
                background-color: aquamarine;
            }
            .wrapper .scroll .scrollIn {
                position: absolute;
                /* height: 100px; */
                width: 30px;
                background-color: tomato;
            }
            .wrapper .content {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <!-- 内容区 -->
            <div class="content"></div>

            <!-- 滑槽 -->
            <div class="scroll">
                <!-- 滑块 -->
                <div class="scrollIn">

                </div>
            </div>
        </div>
        <script>
            // 1.拖拽滚动条
            // 2.边界
            // 3.生成内容
            // 4.滑块联动内容
            // 5.滚轮联动滑块
            // 6.滚轮联动内容

            var scrollIn = document.querySelector('.wrapper .scroll .scrollIn');
            var content = document.querySelector('.wrapper .content');

            // 内容
            for(var i = 1; i <= 200; i++){
                content.innerHTML += i + '<br>';
            }
            // 因为不涉及滑动  所以在哪写都可以
            // 根据内容展示滑块的高度
            // 滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度

            // 滑块的高度        滑槽的高度
            // ---------    =  -----------
            // 滑槽的高度        内容的高度

            // 滑块的高度  = (滑槽的高度 / 内容的高度 ) * 滑槽的高度

            // (滑槽的高度 / 内容的高度 )
            var scale = document.documentElement.clientHeight / content.clientHeight;

            //  (滑槽的高度 / 内容的高度 ) * 滑槽的高度
            var scrollIn_h = scale * document.documentElement.clientHeight;

            scrollIn.style.height = scrollIn_h + 'px';

            // 滑槽和滑块
            scrollIn.onmousedown = function(event){
                var eleY = scrollIn.offsetTop;

                var startY = event.clientY;

                document.onmousemove = function(event){
                    var endY = event.clientY;

                    var disY = endY - startY;

                    var lastY = disY + eleY;

                    // 边界
                    if(lastY >= document.documentElement.clientHeight - scrollIn.clientHeight){
                        lastY = document.documentElement.clientHeight - scrollIn.offsetHeight;
                    }else if(lastY <= 0){
                        lastY = 0;
                    }
                    scrollIn.style.top = lastY + 'px';

                    // 滑块动完了之后 内容跟着动
                    // 滑槽的高度 / 内容的高度 = 滑块滚动距离--滑块的最终位置 / 内容的滚动距离 

                    // 内容的滚动距离 = 滑块滚动距离 / (滑槽的高度 / 内容的高度)
                    var content_h = lastY / scale;
                    content.style.top = -content_h + 'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
            }
            // 滚轮联动滑块
            function move(event){
                var flag;
                if(event.wheelDelta){
                    if(event.wheelDelta > 0){
                        flag = true;
                    }else{
                        flag = false;
                    }
                }else{
                    if(event.detail < 0){
                        flag = true;
                    }else {
                        flag = false;
                    }
                }   
                if(flag){
                    var lastY = scrollIn.offsetTop - 10;
                    if(lastY <= 0){
                        lastY = 0;
                    }
                    scrollIn.style.top = lastY + 'px';
                    // 滚轮联动内容
                    // 内容的滚动距离 = 滑块滚动距离 / (滑槽的高度 / 内容的高度)
                    var content_wheel_h = scrollIn.offsetTop / scale;
                    content.style.top = -content_wheel_h + 'px';
                }else {
                    var lastY = scrollIn.offsetTop + 10;

                    if(lastY >= document.documentElement.clientHeight - scrollIn.offsetHeight){
                        lastY = document.documentElement.clientHeight - scrollIn.clientHeight;
                    }
                    scrollIn.style.top = lastY + 'px';
                    // 滚轮联动内容
                    var content_wheel_h = scrollIn.offsetTop / scale;
                    content.style.top = -content_wheel_h + 'px';
                }
            }
            window.addEventListener('mousewheel',move);
            window.addEventListener('DOMMouseScroll',move);
  
        </script>
    </body>
</html>

3. 轮播

需求分析

（1）瞬变-右

（2）瞬变-左

（3）瞬变-封装

（4）渐变-右

（5）渐变-左

（6）渐变-封装

（7）无限轮播

（8）图片联动小圆点

（9）小圆点联动图片

（10）自动轮播

（11）鼠标移入悬停

（12）定时器叠加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            
            img{
                display: block;
                /*vertical-align: middle;*/
            }
            
            a{
                text-decoration: none;
            }
            
            input{
                outline: none;
            }
            
            .clearFix:after{
                content: '';
                display: table;
                clear: both;
            }
            
            #box{
                position: relative;
                width: 600px;
                height: 300px;
                margin: 50px auto;
                overflow: hidden;
            }
            
            #box .list{
                position: absolute;
                width: 4200px;
                height: 300px;
                left: -600px;
            }
            
            #box .list li{
                float: left;
                width: 600px;
                height: 300px;
            }
            
            #box .list li img{
                width: 600px;
                height: 300px;
            }
            
            
            #box span{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 50px;
                height: 100px;
                background-color: rgba(200,200,200,.7);
                font-size: 50px;
                text-align: center;
                line-height: 100px;
                color: white;
                opacity: 0;
                transition: opacity 2s;
            }
            #box .left{
                left: 0;
            }
            #box .right{
                right: 0;
            }
            
            #box .iconList{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
                overflow: hidden;
            }
            
            #box .iconList li{
                float: left;
                width: 40px;
                height: 40px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: gray;
            }
            
            #box .iconList li.current{
                background-color: red;
            }
            
            
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="list">
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/1.jpg"/></li>
            </ul>
            
            <span class="left">  <  </span>
            <span class="right">  >  </span>
            
            
            <ul class="iconList">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            var box = document.querySelector('#box');

            var span_list = document.querySelectorAll('#box span');

            var timer = null;


            // 移入显示左右
            // #region
            box.onmouseenter = function(){
                span_list[0].style.opacity = '.7';
                span_list[1].style.opacity = '.7';
            }

            box.onmouseleave = function(){
                span_list[0].style.opacity = 0;
                span_list[1].style.opacity = 0;
            }
            //#endregion

            var ul = document.querySelector('.list');
            // 需求分析
            // （1）瞬变-右
            // #region
            // span_list[1].onclick = function(){
            //  // ul的起始位置
            //  var startX = ul.offsetLeft;
            //  // 每每点击一次 那么移动的步长就是一张图片
            //  // 图片的宽度是600  又因为向左移动 所以是-600
            //  var step = -600;

            //  // 最终位置
            //  var endX = startX + step;
            //  ul.style.left = endX + 'px';
            // }
            // #endregion

            // （2）瞬变-左
            //#region 
            // span_list[0].onclick = function(){
            //  // 获取ul的起始位置的偏移量
            //  var startX = ul.offsetLeft;
            //  // 设置步长
            //  var step = 600;
            //  // 获取结束位置
            //  var endX = startX + step;

            //  ul.style.left = endX + 'px';
            // }
            //#endregion


            // （3）瞬变-封装
            //#region 
            // function move(flag){
            //  var startX = ul.offsetLeft;
            //  var step = flag;
            //  var endX = startX + step;
            //  ul.style.left = endX + 'px';
            // }

            // span_list[1].onclick = function(){
            //  move(-600);
            // }

            // span_list[0].onclick = function(){
            //  move(600);
            // }
            //#endregion


            // （4）渐变-右
            //#region 
            // span_list[1].onclick = function(){
            //  // 从0开始 每走动一张图片之后停
            //  // 以下三行代码  代表的是每次点击最终要停止的位置
            //  // 获取ul的偏移量
            //  var ul_offsetLeft = ul.offsetLeft;
            //  // 每一次要移动的距离
            //  var move_dis = -600;
            //  // 最终要停止的位置
            //  var lastX = ul_offsetLeft + move_dis;
                

            //  timer = setInterval(function(){
            //      var startX = ul.offsetLeft;
            //      var step = -30;
            //      var endX = startX + step;

            //      if(endX == lastX){
            //          clearInterval(timer);
            //      }
            //      ul.style.left = endX + 'px';
            //  },30)
            // }
            //#endregion

            // （5）渐变-左
            //#region 
            // span_list[0].onclick = function(){

            //  var ul_offsetLeft = ul.offsetLeft;
            //  var move_dis = 600;
            //  var lastX = ul_offsetLeft + move_dis;


            //  timer = setInterval(function(){
            //      var startX = ul.offsetLeft;
            //      var step = 30;
            //      var endX = startX + step;

            //      if(endX == lastX){
            //          clearInterval(timer);
            //      }

            //      ul.style.left = endX + 'px';

            //  },30)

            // }
            //#endregion


            // （6）渐变-封装
            //#region 
            function move(flag){
                // 点击停止的位置
                var ul_offsetLeft = ul.offsetLeft;

                var move_dis;
                if(flag){
                    move_dis = -600;
                }else{
                    move_dis = 600;
                }

                var lastX = ul_offsetLeft + move_dis;


                // 一张图片移动的时间
                var allTime = 600;
                // 一步移动的时间
                var stepTime = 30;
                // 一张图片移动多少步   20
                var stepNum = allTime / stepTime;

                // 每一步移动的
                timer = setInterval(function(){
                    var startX = ul.offsetLeft;
                    // var step;
                    // if(flag){
                    //  step = -30;
                    // }else {
                    //  step = 30;
                    // }
                    // 总的距离/ 步数 ==>步长
                    // 右：-600 / 20
                    // 左：600 / 20
                    var step = move_dis / stepNum;

                    var endX = startX + step;

                    if(endX == lastX){
                        clearInterval(timer);
                    }

                    // 无限轮播
                    if(endX == -3600){
                        endX = -600;
                    }else if(endX == 0){
                        endX = -3000;
                    }

                    ul.style.left = endX + 'px';
                },stepTime);


            }

            span_list[1].onclick = function(){
                move(true);
            }

            span_list[0].onclick = function(){
                move(false);
            }
            //#endregion

            // （7）无限轮播



            // （8）图片联动小圆点
            // （9）小圆点联动图片

            // （10）自动轮播
            // （11）鼠标移入悬停
            // （12）定时器叠加

        </script>
    </body>
</html>

完善轮播图
定时器叠加问题
- 发生情况：连续点击定时器执行的时间的间隔很短
  - 定义变量然后加判断能否执行再把变量值改变

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        img {
            display: block;
            /*vertical-align: middle;*/
        }

        a {
            text-decoration: none;
        }

        input {
            outline: none;
        }

        .clearFix:after {
            content: '';
            display: table;
            clear: both;
        }

        #box {
            position: relative;
            width: 600px;
            height: 300px;
            margin: 50px auto;
            overflow: hidden;
        }

        #box .list {
            position: absolute;
            width: 4200px;
            height: 300px;
            left: -600px;
        }

        #box .list li {
            float: left;
            width: 600px;
            height: 300px;
        }

        #box .list li img {
            width: 600px;
            height: 300px;
        }


        #box span {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 100px;
            background-color: rgba(200, 200, 200, .7);
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            color: white;
            opacity: 0;
            transition: opacity 2s;
        }

        #box .left {
            left: 0;
        }

        #box .right {
            right: 0;
        }

        #box .iconList {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            overflow: hidden;
        }

        #box .iconList li {
            float: left;
            width: 40px;
            height: 40px;
            margin-right: 10px;
            border-radius: 50%;
            background-color: gray;
        }

        #box .iconList li.current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li><img src="img/5.jpg" /></li>
            <li><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
            <li><img src="img/1.jpg" /></li>
        </ul>

        <span class="left">
            < </span>
                <span class="right"> > </span>


                <ul class="iconList">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
    </div>

    <script type="text/javascript">
        var box = document.querySelector('#box');

        var span_list = document.querySelectorAll('#box span');

        var ul = document.querySelector('#box .list');

        var timer = null;

        var icon_list = document.querySelectorAll('.iconList li');

        var auto_timer = null;

        box.onmouseenter = function () {
            span_list[0].style.opacity = '.7';
            span_list[1].style.opacity = '.7';

            clearInterval(auto_timer);
        }

        box.onmouseleave = function () {
            span_list[0].style.opacity = 0;
            span_list[1].style.opacity = 0;

            auto_play();
        }

        // 需求分析
        // （1）瞬变-右
        // （2）瞬变-左
        // （3）瞬变-封装
        // （4）渐变-右
        // （5）渐变-左
        // （6）渐变-封装
        // （7）无限轮播


        for (var i = 0; i < icon_list.length; i++) {
            icon_list[i].index = i;

            icon_list[i].onclick = function () {
                // move();
                // 点谁 就要小圆点的下标
                // console.log(this.index);
                // 点谁 要图片的下标
                // console.log(this.index + 1);
                // 点谁 图片的偏移量
                move((this.index + 1) * -600);

            }
        }

        // 自动轮播
        auto_play();

        function auto_play() {
            auto_timer = setInterval(function () {
                move(true);
            }, 2000);
        }

        var is_move = false;

        function move(flag) {

            if (is_move) {
                return;
            }
            is_move = true;

            var ul_offset = ul.offsetLeft;
            // 移动的距离
            var move_dis;
            if (typeof flag == 'boolean') {
                if (flag) {
                    move_dis = -600;
                } else {
                    move_dis = 600;
                }
            } else {
                // flag代表的是点击之后的图片的偏移量
                // ul.offsetLeft 代表点击之前的偏移量
                move_dis = flag - ul.offsetLeft;
            }


            var lastX = ul_offset + move_dis;

            var allTime = 600;
            var stepTime = 30;

            var stepNum = allTime / stepTime;

            timer = setInterval(function () {
                var startX = ul.offsetLeft;
                var step = move_dis / stepNum;
                var endX = startX + step;

                if (endX == lastX) {
                    clearInterval(timer);
                    is_move = false;
                    if (endX == -3600) {
                        endX = -600;
                    } else if (endX == 0) {
                        endX = -3000;
                    }
                }

                ul.style.left = endX + 'px';
            }, stepTime);
            // （8）图片联动小圆点
            // 思路：当前图片对应的小圆点会变成红色
            //       图片和小圆点的对应关系
            //       7张图片  5个小圆点
            //       找到图片的下标 然后减一就是小圆点的下标
            //       如何找到图片的下标  用ul的偏移量除以-600就可以得到


            // 让所有的li状态统一
            for (var i = 0; i < icon_list.length; i++) {
                icon_list[i].className = '';
            }

            // 让当前的图片对应的那个小圆点的class=current

            // 小圆点的下标 （移动之后的图片的偏移量/-600=图片的下标）
            var index = lastX / -600 - 1;

            if (index > 4) {
                index = 0;
            } else if (index < 0) {
                index = 4;
            }

            icon_list[index].className = 'current';


        }

        span_list[1].onclick = function () {
            move(true);
        }

        span_list[0].onclick = function () {
            move(false);
        }

            // （8）图片联动小圆点
            // 思路：当前图片对应的小圆点会变成红色
            //       图片和小圆点的对应关系
            //       7张图片  5个小圆点
            //       找到图片的下标 然后减一就是小圆点的下标
            //       如何找到图片的下标  用ul的偏移量除以-600就可以得到

            // （9）小圆点联动图片

            // （10）自动轮播
            // （11）鼠标移入悬停
            // （12）定时器叠加
    </script>
</body>
</html>

2023-03-22_DOMDAY07-滚动条以及轮播

1. 添加自定义滚动条

2. 滚轮事件基础

3. 轮播

完善轮播图

定时器叠加问题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读