12.JavaScript核心BOM操作学习（界面交互功能）——通过JavaScript完成轮播图的实现步骤汇总（图片实现无缝滚动）、通过JavaScript实现动画版回到顶部

最新推荐文章于 2022-07-20 17:19:40 发布

愿时间能学会宽恕

最新推荐文章于 2022-07-20 17:19:40 发布

阅读量427

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： js javascript css html5

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/108134181

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

⑤常见网页特效案例

Ⅰ.网页轮播图
轮播图也称为焦点图，是网页中比较常见的特效案例

功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
3.图片播放的同时，下面小圆圈模块跟随一起变化
4.点击小圆圈，可以播放相应图片
5.鼠标不经过轮播图，轮播图也会自动播放图片
6.鼠标经过，轮播图模块，自动播放停止

步骤一：
         因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中
         此时需要添加load事件，在文件加载完毕后进行js的加载
         鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
         显示隐藏display按钮
步骤二：
         动态生成小圆圈，小圆圈个数要跟图片张数一致
         所以首先先得到ul里面图片的张数（图片放li里面，所以就是li的个数）
         利用循环动态生成小圆圈（小圆圈放在ol里面）
         创建节点createElement(‘li’)
         插入节点ol.appendChild(li)
步骤三：
         小圆圈的排他思想
         点击当前小圆圈，就添加current类
         其余小圆圈就移除这个current类
         注意：我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了
步骤四：
         点击小圆圈滚动图片
         此时用到animate动画函数，将js文件引入
         使用动画函数的前提，该元素必须有定位
         注意是ul移动而不是li移动
         滚动图片的核心算法：点击某个小圆圈，就让图片滚动小圆圈的索引号乘以图片的宽度作为ul移动距离
         此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性就行
步骤五：
         点击右侧按钮一次，就让图片滚动一张
         声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul的滚动距离
         图片实现无缝滚动原理
         把ul第一个li复制一份，放到ul的最后面
         当图片滚动到克隆的最后一张图片后，让ul直接跳转到第一张图片（因为是一样的图片，动画显示，就是无缝滚动）
         同时num赋值为0，可以重新开始滚动图片
步骤六
         克隆第一张图片
         克隆ul的第一个li
                  cloneNode() 加true 深克隆复制里面的子节点加false 浅克隆
         添加到ul最后面，appendChild
步骤七
         点击右侧按钮，小圆圈跟随变化
         最简单的做法是再声明一个变量circle，每次点击自增1，注意，左侧按钮也需要这个变量，因此要声明全局变量
         但是我们有5张图片，我们小圆圈只有4个少一个，必须加一个判断条件，如果circle==4，重新复原0
步骤八
         左侧按钮的实现，与步骤七类似
bug的调试
         图片乱跳的情况和下方原点和图片的不一致
         因为图片的索引号和小圆点的号不一致
最后
         自动播放功能
         添加一个定时器
         自动播放轮播图，实际就类似于点击了右侧按钮
         此时我们使用手动调用右侧按钮点击事件arrow_r.click()
         鼠标经过图片就停止定时器

节流阀

防止轮播图按钮连续点击造成播放过快

节流阀的目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量var flag=true;
if(flag){flag=false;do something} 关闭水龙头

利用回调函数动画执行完毕，flag=true 打开水龙头

Ⅱ.动画版回到顶部
代码借用第10天回到顶部

带有动画的返回顶部
此时可以继续使用我们封装的动画函数
只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过window.pageYOffset
最后是页面滚动，使用window.scroll(x,y)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width: 1400px;
            margin: 0px auto;
            position: relative;
        }
        *{
            padding: 0px;
            margin: 0px;
        }
        .common{
            margin: 0px auto;
            margin-bottom: 20px;
            width: 1200px;
            height: 600px;
            background-color: pink;
        }
        .first{
            position: relative;
        }
        .right_bar{
            width: 100px;
            height: 200px;
            top:300px;
            right:0px;
            position:absolute;
            background-color: yellow;
        }
        span{
            font-size: 40px;
            cursor: ;
        }
    </style>
</head>

<body>
    <div class="right_bar ">
        <span>Hello world</span>
    </div>
    <div class="first common"></div>
    <div class="common"></div>
    <div class="common"></div>
    <script>
        var nav=document.querySelector('.right_bar');
        var span=document.querySelector('span');
        console.log(nav.offsetTop);
        document.addEventListener('scroll',function(){
            var Y=window.pageYOffset;
            if(window.pageYOffset>300){
                console.log(window.pageYOffset-300);
                nav.style.top=window.pageYOffset+'px';
                span.innerText="上面";
                span.style.cursor="pointer"
                //点击回到最上方
                span.addEventListener('click',function(){
                    animate(window,0)
                })
            }
            else{
                nav.style.top=300+'px';
                span.innerText="Hello world"
                span.style.cursor=""
            }
        })
        function animate(obj,target,callback){      
            clearInterval(obj.time);    
            obj.time =setInterval(fn,15); 
            function fn(){
                var s=(target-window.pageYOffset)/10;
                s=s>0 ? Math.ceil(s) : Math.floor(s); 
                window,scroll(0,window.pageYOffset+s)
                if(window.pageYOffset==target){
                    if(callback){
                        callback();
                    }
                    clearInterval(obj.time);
                }
            }
        }
    </script>
<body>
</html>