23个项目管理经典案例_交互动画

2022-11-03 15:48:56 浏览数 (1)

javaScript动画项目案例

示例代码：我的github demo效果演示示例：我的demo网站

1.动画库编写

匀速运动

案例一

效果:匀速运动

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <h2>
        匀速运动
    </h2>
    <button id="btn">按钮</button>
    <div id="box">

    </div>

    <script>
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        console.log(box.style.left);
        // 设置定时器  边界问题 定时器处理
        let timer = null;
        let max_val = 500;
        let count = 0;
        btn.onclick = function () {
            // 1.清除定时器
            clearInterval(timer);
            // 2.设置定时器
            timer = window.setInterval(function () {
                // 3.判断边界
                if (count >= max_val) {
                    clearInterval(timer);
                    return;
                }
                count  = 1;
                box.style.left = count   'px';
            }, 30)
        }
    </script>
</body>

</html>

使用定时器控制位置

案例二：侧边栏效果

效果:侧边栏效果

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

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

        #box {
            width: 300px;
            height: 100px;
            position: relative;
            background-color: blue;
            left: -300px;
        }

        #box span {
            width: 50px;
            height: 100px;
            left: 300px;
            position: absolute;
            background-color: #000000;
            color: #ffffff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <span>拉开</span>
    </div>
    <script>
        const pull = document.querySelector('#box span');
        const box = document.querySelector('#box');
        box.onmouseover = function () {
            startAnimation(this,0);
        }
        box.onmouseout = function () {
            startAnimation(this,-300);
        }
        let timer = null;
        let speed = 0;
        // obj代表动画对象  end 代表结束坐标
        function startAnimation(obj, end) {
            // 1.清除定时器
            clearInterval(timer);
            timer = setInterval(function () {
                // 计算速度
                speed = obj.offsetLeft > end ? -5 : 5;
                // 2.结束条件
                if (obj.offsetLeft == end) {
                    clearInterval(timer);
                    return;
                }
                // 3.执行动画
                obj.style.left = obj.offsetLeft   speed   'px';
            }, 50)
        }
    </script>
</body>
</html>

缓动运动

效果:缓动运动 缓动运动就是通过控制速度，使动画达到淡出效果

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

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

        #box {
            width: 300px;
            height: 100px;
            position: relative;
            background-color: blue;
            left: -300px;
        }

        #box span {
            width: 50px;
            height: 100px;
            left: 300px;
            position: absolute;
            background-color: #000000;
            color: #ffffff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <span>拉开</span>
    </div>
    <script>
        const pull = document.querySelector('#box span');
        const box = document.querySelector('#box');
        box.onmouseover = function () {
            startAnimation(this,0);
        }
        box.onmouseout = function () {
            startAnimation(this,-300);
        }
        let timer = null;
        let speed = 0;
        // obj代表动画对象  end 代表结束坐标
        function startAnimation(obj, end) {
            // 1.清除定时器
            clearInterval(timer);
            timer = setInterval(function () {
                // 计算速度
                speed = (end - box.offsetLeft)/20;
                // 计算速度  速度为负数时,用floor保证最小为-1  速度为正数时，用ceil保证最小为1
                speed = obj.offsetLeft > end ? Math.floor(speed) : Math.ceil(speed);
                // 2.结束条件
                if (obj.offsetLeft == end) {
                    clearInterval(timer);
                    return;
                }
                // 3.执行动画
                obj.style.left = obj.offsetLeft   speed   'px';
            }, 50)
        }
    </script>
</body>

</html>

注意： speed = (end - box.offsetLeft)/20; 代表用（终点位置-当前位置）/动画系数 动画系数可以控制动画的快慢

透明度运动

效果:透明度运动 通过修改透明度变化进而修改动画

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 0.3;
            filter: alpha(opacity:30);
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        const box = document.getElementById('box');
        box.onmouseover = function () {
            opacityAnimation(this,100);
        }
        box.onmouseout = function () {
            opacityAnimation(this,30);
        }
        let timer = null,speed = 0,alpha = 30; // alpha:透明度数值
        function opacityAnimation(obj,end) {
            // 1.清除原定时器
            clearInterval(timer);
            // 2.设置新定时器
            timer = setInterval(function () {
                // 3.设置速度数值
                speed = (end - alpha) / 20;
                speed = end > alpha ? Math.ceil(speed):Math.floor(speed);
                // 3.边界处理
                if(alpha === end){
                    clearInterval(timer);
                    return ;
                }
                // 4.运动 设置属性
                alpha  = speed
                obj.style.opacity = alpha / 100;  //用于一般浏览器  
                obj.style.filter = `alpha(opacity:${alpha})`; //用于ie8及以下浏览器
            },30)

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

多物体运动

效果:多物体运动

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        box1.onmouseover = function () {
            startAnimation(box1,500);
        }
        box1.onmouseout = function () {
            startAnimation(box1,100);
        }
        box2.onmouseover = function () {
            startAnimation(box2,500);
        }
        box2.onmouseout = function () {
            startAnimation(box2,100);
        }
        let speed=0;
        // 多物体运动时，timer绑在对象上面
        function startAnimation(obj,end) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if(end === obj.offsetWidth){  // offsetWidth: 盒子的width border
                    clearInterval(obj.timer);
                    return;
                }
                // 运动
                speed = end > obj.offsetWidth ? 10:-10;
                obj.style.width = obj.offsetWidth   speed   'px';
            },30)
        }
    </script>
</body>
</html>

注意：多物体运动时，定时器需要绑在对象上，清除定时器时，只需要清除自己的定时器即可

多值运动

效果:多值运动 将上述代码进一步封装，使其可以针对任意属性变化都能产生动画效果

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        box1.onmouseover = function () {
            startAnimation(box1,"width",500);
        }
        box1.onmouseout = function () {
            startAnimation(box1,"width",100);
        }
        box2.onmouseover = function () {
            startAnimation(box2,"opacity",30);
        }
        box2.onmouseout = function () {
            startAnimation(box2,"opacity",100);
        }
        let speed=0;

        function startAnimation(obj,attr,end) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                let cur = 0;
                if(attr === 'opacity'){
                    cur = Math.round(parseFloat(getStyle(obj,attr)) * 100);  // 透明度默认为0到1之间，将透明度获取的值*100  
                }else{
                    cur = parseInt(getStyle(obj,attr));
                }
                if(end === cur){
                    clearInterval(obj.timer);
                    return;
                }
                // 运动
                speed = end > cur ? 10:-10;
                if(attr === 'opacity'){
                    // 设置透明度
                    obj.style[attr] = (cur   speed) / 100;
                    obj.style['filter'] = `alpha(opacity:${cur   speed})`;
                }else{
                    obj.style[attr] = cur   speed   'px';
                }
                
            },30)
        }
        // 获取属性  因为使用obj.style获取的属性仅仅为内嵌的值，获取不到行内样式和外部引用的值
        function getStyle(obj,attr) { 
            if(obj.currentStyle){
                // 针对IE浏览器
                return obj.currentStyle[attr];
            }else{
                // 针对于Firefox浏览器
                return getComputedStyle(obj,null)[attr];
            }
        }
    </script>
</body>
</html>

链式运动

效果:链式运动 可以让物体先变宽再变长，只需要将上述代码加回调函数的参数即可 myAnimation.js

代码语言：javascript复制
/**
 * 动画函数
 * @param {Object} obj 当前对象
 * @param {Object} attr 当前元素对象的属性
 * @param {Object} end 末尾位置
 * @param {Object} fn 回调函数
 * */
function startAnimation(obj,attr,end,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        let cur = 0,speed = 0;
        if(attr === 'opacity'){
            cur = Math.round(parseFloat(getStyle(obj,attr)) * 100); 
            // console.log(getStyle(obj,attr));
        }else{
            cur = parseInt(getStyle(obj,attr));
        }
        if(end === cur){
            clearInterval(obj.timer);
            // 回调函数放在动画执行结束之后
            if(fn){
                fn();
            }
            return;
        }
        // 运动
        speed = end > cur ? 10:-10;
        if(attr === 'opacity'){
            // console.log(cur   speed);
            obj.style[attr] = (cur   speed) / 100;
            obj.style['filter'] = `alpha(opacity:${cur   speed})`;
        }else{
            obj.style[attr] = cur   speed   'px';
        }
        
    },30)
}
// 获取属性
function getStyle(obj,attr) { 
    if(obj.currentStyle){
        // 针对IE浏览器
        return obj.currentStyle[attr];
    }else{
        // 针对于Firefox浏览器
        return getComputedStyle(obj,null)[attr];
    }
}

index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script src="myAnimation.js"></script>
    <script>
        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        // 链式运动
        box1.onmouseover = function () {
            startAnimation(box1,"width",500,function () {
                startAnimation(box1,"height",500,function () {
            });
            });
        }
        box1.onmouseout = function () {
            startAnimation(box1,"width",100);
        }
        box2.onmouseover = function () {
            startAnimation(box2,"opacity",30);
        }
        box2.onmouseout = function () {
            startAnimation(box2,"opacity",100);
        }
        // 多物体运动时，timer绑在对象上面

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

同时运动

效果:同时运动 可以让物体同时变长变宽，修改原来代码，将传入的属性和值改成传入json格式类型

动画库最终版本 myAnimation2.js

代码语言：javascript复制
/**
 * 动画函数
 * @param {Object} obj 当前对象
 * @param {Object} json 当前元素属性列表
 * @param {Object} fn 回调函数
 * */
function startAnimation(obj,json,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        let cur = 0,speed = 0;  
        let flag = true; // flag:代表所有动画执行完毕

        // 将json中所有元素属性遍历，修改
        for(attr in json){
            let end = json[attr];

            // 获取对象属性值
            switch(attr){
                case "opacity":
                    cur = Math.round(parseFloat(getStyle(obj,attr)) * 100);
                    break;
                case "scrollTop":
                    cur = obj[attr];
                    break;
                default:
                    cur = parseInt(getStyle(obj,attr));
            }

            // 临界处理 该动画没有执行完毕
            if(end !== cur){
                flag = false;
            }else{
                continue;
            }
            console.log(cur);
            // 设置速度：判断结束值end和当前值cur相差值小于speed速度
            if(end > cur){ 
                // end=100 cur=92   speed=10
                speed = end - cur < 100?end - cur:100;
            }else{
                // end=0 cur=2 speed=-10
                speed = end - cur > -100?end - cur:-100;
            }

            // 设置值
            switch(attr){
                case "opacity":
                    obj.style[attr] = (cur   speed) / 100;
                    obj.style['filter'] = `alpha(opacity:${cur   speed})`;
                    break;
                case "scrollTop":
                    obj[attr] = cur   speed;
                    break;
                default:
                    obj.style[attr] = cur   speed   'px';
            }
        }
        // 查看flag是否为true，  都当所有属性都没有被修改时，flag为true，结束动画
        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
            return ;
        }
    },30)
}
// 获取属性
function getStyle(obj,attr) { 
    if(obj.currentStyle){
        // 针对IE浏览器
        return obj.currentStyle[attr];
    }else{
        // 针对于Firefox浏览器
        return getComputedStyle(obj,null)[attr];
    }
}

使用for遍历json，将每个属性修改，直到最后，当每个属性都到最终值时，条件结束，清除定时器 index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script src="myAnimation2.js"></script>
    <script>
        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        // 链式运动
        box1.onmouseover = function () {
            startAnimation(box1,{
                "width":500,
                "height":800
            });
        }
        box1.onmouseout = function () {
            startAnimation(box1,{
                "width":100,
                "height":100
            });
        }
        box2.onmouseover = function () {
            startAnimation(box2,{
                "opacity":30,
                "width":600
            });
        }
        box2.onmouseout = function () {
            startAnimation(box2,{
                "opacity":100,
                "width":100
            });
        }
    </script>
</body>
</html>

案例

案例一：关闭页脚广告效果

效果:关闭页脚广告效果 点击关闭按钮，右下角广告就会先向下移动再向右移动至消失，具体myAnimation2.js文件在上述有写到 点击前往myAnimation2.js文件内容

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #ad{
            position: fixed;
            bottom: 0;
            right: 0;
        }
        #close{
            width: 25px;
            height: 25px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 5;
        }

    </style>
</head>
<body>
    <div id="ad">
        <img src="./ad.png" alt="" width="300px">
        <span id="close"></span>
    </div>
    <script src="./myAnimation2.js"></script>
    <script>
        const ad = document.getElementById('ad');
        const close = document.getElementById('close');
        close.onclick = function () {
            startAnimation(ad,{"height":260},function () {
                startAnimation(ad,{"width":0},function () {
                    ad.style.display = 'none';
                  })
              });
        }
    </script>
</body>
</html>

案例二：侧边栏横幅效果

效果:侧边栏横幅效果 左侧中间的广告随着页面移动，而一直向中间移动的动画 点击前往myAnimation2.js文件内容

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #aside{
            position: absolute;
            top: 200px;
            left: 0;
            width: 300px;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body style="height:5000px">
    <div id="aside">
        <img src="./aside.png" alt="">
    </div>
    <script src="./myAnimation2.js"></script>
    <script>
        window.onload = function () {
            const aside = document.getElementById('aside');
            const aside_top = aside.offsetTop;  // 距离浏览器顶部的位置
            window.onscroll = function () {
                // 页面滚动的距离
                let docScroll = document.documentElement.scrollTop || document.body.scrollTop;
                // 设置动画
                startAnimation(aside,{
                    'top':aside_top docScroll
                })
            }
        }
    </script>
</body>
</html>

offsetTop 偏移量，相当于绝对定位的子盒子的top属性 docScroll 使用兼容性写法，因为获取滚动高度可能由于浏览器不同获取方法不同

案例三：淘宝侧边导航效果

效果:淘宝侧边导航效果 右侧侧边导航，随着页面移动，导航条上也移动到相应栏目；如果点击导航条上板块名，页面也会移动到相应板块处 点击前往myAnimation2.js文件内容

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
html,body{
width: 100%;
height: 100%;
}
#container{
width: 1200px;
margin: 0 auto;
height: 100%;
}
#container div{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 30px;
}
.aside{
position: fixed;
width: 40px;
right: 20px;
top: 300px;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.aside li{
height: 50px;
border-bottom: 1px solid #ddd;
}
.aside li a{
color: peru;
}
.aside li.current{
background-color: peru;
}
.aside li.current a{
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div class="current">爱逛好货</div>
<div>好店直播</div>
<div>品质特色</div>
<div>实惠热卖</div>
</div>
<ul class="aside" id="aside">
<li class="current"><a href="javascript:void(0);">爱逛好货</a></li>
<li><a href="javascript:void(0);">好店直播</a></li>
<li><a href="javascript:void(0);">品质特色</a></li>
<li><a href="javascript:void(0);">实惠热卖</a></li>
</ul>
<script src="./myAnimation2.js"></script>
<script>
// 获取对象
const aside = document.getElementById('aside');
const lis = aside.children;
const Odiv = document.getElementById("container");
const Divs = Odiv.children;
// 给盒子上色
colors = ['blue','purple','orange','green'];
[...Divs].forEach((element,i,arr)=>{
element.style.backgroundColor = colors[i];
});
// 设置侧边栏点击事件
let isClick = false;  // 点击触发滚动的标准
[...lis].forEach((element,i,arr) => {
element.onclick = function (){
arr.forEach(el=>{
el.className = "";
})
this.className = "current";
// document.documentElement.scrollTop = i * document.documentElement.clientHeight;
// 制作点击侧边栏，内容部分滚动相应位置的动画
isClick = true;
startAnimation(document.documentElement,{
"scrollTop":i * document.documentElement.clientHeight
},function () {
isClick = false;
})
}
});
// 监听滚动  滚动到相应位置，侧边栏也会调整active
window.onscroll = function () {
// 如果用户不是因为点击侧边栏而触发的滚动
if(!isClick){
// 获取当前滚动值
let top = document.documentElement.scrollTop || document.body.scrollTop;
let i = Math.floor(top / document.documentElement.clientHeight);  // 计算索引
// 排他
[...lis].forEach(element=>element.className = "");
lis[i].className = "current";
}
}
</script>
</body>
</html>

[…Divs] 使用了es6写法,将dom获取的集合类型转换为真正的数组，有forEach变量方法；这一步等价于使用for(element in Divs) 循环

案例四：轮播图

效果:轮播图 可以自动滚动，鼠标悬停时，取消滚动；可以上一页下一页，可以点击索引跳到相应位置 点击前往myAnimation2.js文件内容 index.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="slider" class="slider">
<div class="slider_scroll" id="slider_scroll">
<!-- 轮播图部分 -->
<div class="slider_main" id="slider_main">
<!-- 每一个轮播图元素 -->
<div class="item">
<a href="#">
<img src="./images/img1.png" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="./images/img2.png" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="./images/img3.png" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="./images/img4.png" alt="">
</a>
</div>
</div>
<!-- 上一张和下一张 -->
<span class="next" id="next"></span>
<span class="prev" id="prev"></span>
<!-- 索引部分 -->
<div class="slider_index" id="slider_index">
<!-- js动态生成 -->
</div>
</div>
</div>
<script src="./js/myAnimation2.js"></script>
<script src="./js/index.js"></script>
</body>
</html>

index.css

代码语言：javascript复制
*{
padding: 0;
margin: 0;
}
.slider{
width: 400px;
height: 500px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider_scroll {
position: relative;
width: 400px;
height: 500px;
}
.slider_main{
position: relative;
width: 400px;
height: 500px;
}
.slider_main .item{
width: 40px;
height: 500px;
position: absolute;
}
.slider_main .item img{
width: 400px;
height: 500px;
}
/* 索引部分 */
.slider_index{
width: 400px;
height: 40px;
line-height: 40px;
text-align: center;
color:#fff;
font-weight: 700;
z-index: 20;
position: absolute;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
.slider_index .slider_index_icon{
margin: 0 10px;
line-height: 40px;
cursor: pointer;
}
.slider_index .slider_index_icon.current{
color: red;
}
/* 下一张和上一张定位 */
.slider_scroll>span{
position: absolute;
width: 30px;
height: 68px;
background: url(../images/icon-slides.png) no-repeat;
top: 50%;
margin-top: -34px;
cursor: pointer;
}
.slider_scroll span.next{
right: 0;
background-position: -46px 0;
}
.slider_scroll span.prev{
left: 0;
background-position: 0 0;
}

index.js

代码语言：javascript复制
window.onload = function () {
// 获取元素
const slider = document.getElementById("slider");
const slider_main = document.getElementById("slider_main");
const slider_items = slider_main.children;
const next = document.getElementById("next");
const prev = document.getElementById("prev");
const slider_index = document.getElementById("slider_index");
let iNode = 0;  //当前显示索引的坐标  
// 动态创建索引
[...slider_items].forEach((v,i)=>{
let span = document.createElement("span");
span.innerText = i 1;
// 给索引添加类
if(i === 0){
span.className = "slider_index_icon current"
}else{
span.className = "slider_index_icon"
}
slider_index.appendChild(span);
})
// 让滚动元素归位
let scroll_w = this.parseInt(getStyle(slider,'width'));
// console.log(scroll_w);
[...slider_items].forEach((item,i,arr)=>{
if(i !== 0){
item.style.left = scroll_w   "px";
}
});
// 下一步按钮
function autoPlay() { 
// 1.将显示的图片向左移动
startAnimation(slider_items[iNode],{
"left":-scroll_w
});
// 将下一张图片放在中心盒子的右边
iNode  ;
if(iNode >= slider_items.length){
iNode = 0;
}
// console.log(slider_items[iNode].left);
slider_items[iNode].style.left = scroll_w   "px";
// console.log(slider_items[iNode].left);
// 将下一张图片向左移动
startAnimation(slider_items[iNode],{
"left":0
});
updateIndex();
}
next.onclick = autoPlay;
// 更新索引样式
let slider_index_items = slider_index.children;
function updateIndex() {
// console.log(slider_index_items);
[...slider_index_items].forEach((item,i)=>{
if(i == iNode){
item.className = "slider_index_icon current";
}else{
item.className = "slider_index_icon"
}
})
}
//  上一步按钮
prev.onclick = function () {
// 1.将该元素右移动
startAnimation(slider_items[iNode],{
"left":scroll_w
})
// 2.将上一个元素放在左边
iNode--;
if(iNode < 0){
iNode  = slider_items.length
}
slider_items[iNode].style.left = -scroll_w   "px";
// 3.将上一个元素右移
startAnimation(slider_items[iNode],{
"left":0
})
// 更新下面索引
updateIndex();
};
// 设置索引点击事件
[...slider_index_items].forEach((item,i)=> {
item.onmousedown = function () {
// 1.判断点击的索引与当前索引关系
if(iNode > i){  // 上一张图片效果
startAnimation(slider_items[iNode],{
"left":scroll_w
})
slider_items[i].style.left = -scroll_w   "px";
}else if(iNode < i){  // 下一张图片效果
startAnimation(slider_items[iNode],{
"left":-scroll_w
})
slider_items[i].style.left = scroll_w   "px";
}
iNode = i;
startAnimation(slider_items[iNode],{
"left":0
})
updateIndex();
}
});;
// 设置自动播放
let timer = window.setInterval(autoPlay,2000);
// 设置鼠标悬浮停止定时器，离开开启定时器
slider.onmouseover = function () {
clearInterval(timer);
}
slider.onmouseout = function () {
timer = window.setInterval(autoPlay,2000);
}
}

图片部分，在上传到github上面时，已经将素材上传上去了。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/181497.html原文链接：https://javaforall.cn

json javascript html https 网络安全

0 人点赞