• 原生js写菜单栏滑块动画+Banner滑动效果(清晰思路+附代码)

    一、实现效果

    banner

    二、思路

    1、核心animate.js动画js

    单独做一个动画的js，动画都是基于这个函数，用的时候调用即可，animate(obj, target, callback) 函数有三个形参，obj为动画的对象，target为目标动画移动距离，callback为动画执行完在之后的回调函数。

    //动画函数
//obj 动画绑定对象   traget 目标移动距离   callback回调函数
function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //步长 = （目标值-现在位置）/10  取整
        let step = (target - obj.offsetLeft) / 10;
        //大于0向上取整   小于0向下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画定时器
            clearInterval(obj.timer);
            //判断回调函数是否存在
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    2、菜单栏滑块效果

    nav
    1、html布局：单独布局一个div盒子作为滑块

    "header">
            
    "nav">
                
                
    "cloud">
    
            
    
        
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    2、滑块js

    （1）鼠标移入移出调用animate函数来执行动画，并且对应的菜单字体颜色变色
    （2）鼠标点击后滑块停止在点击的菜单下面，字体变色，鼠标继续滑动会以目前点为初始点进行滑动，这里定义一个参数来接收点击的位置元素的offsetLeft

    //菜单栏滑动块
    let cloud = document.querySelector('.cloud');
    let nav = document.querySelector('.nav');
    let lis = nav.querySelectorAll('li');
    let current = 0; //起始位置
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function() {
            animate(cloud, this.offsetLeft);
        })
        lis[i].addEventListener('mouseleave', function() {
            animate(cloud, current);
        })
        lis[i].addEventListener('click', function() {
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.color = '';
            }
            lis[i].style.color = '#00BFFF'
            current = this.offsetLeft;
        })

    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    3、Banner

    banner滑动布局在布局
    1、小图标
    （1）根据图片数量动态生成小图标按钮，获取图片的ul.children.length,来动态生成li标签
    （2）鼠标移入变色，排他原则
    （3）鼠标划入那个小图标，banner图片会滑动到那张，通过小图标序号i * 图片宽度来实现banner图片的滑动效果

    for (let i = 0; i < ul.children.length; i++) {
        let li = this.document.createElement('li');
        ol.appendChild(li);
        li.setAttribute('index', i)
        li.addEventListener('mouseover', function() {
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = 'white';
            }
            this.style.backgroundColor = '#00BFFF';
            animate(ul, -imgWidth * i)
            let index = this.getAttribute('index');
            num = index;
            circle = index;
        })
    }
    ol.children[0].style.backgroundColor = '#00BFFF';


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2、左右按钮
    （1）点击左右按钮，图片滑动，定义一个参数num，滑动距离=num*图片宽度。
    （2）点击左右按钮后num++，并且小按钮也跟随变化，定义变量circle，要保持两者一致，去一个中间变量index来保持num与circle一致，index可以定义index属性：li.setAttribute('index', i)
    index
    （3）防抖，当点击左右按钮过快会出现图片滑动变快，可以定义一个flag = true来作为节流阀
    首先判断flag，进入后先将flag = false，在动画执行完之后，回调函数callback里面将flag = true
    （4）banner滑动无缝衔接，当滑动到在最后一张图片时候，需要有个判断，跳到第一张，这里在最后一个li加入第一张图片的li，即可实现无缝衔接。加入最后一个li可以采用动态添加节点的方式，克隆第一个节点。

    //克隆第一张图片放在最后节点上面
    let firstImg = ul.children[0].cloneNode(true);
    ul.appendChild(firstImg);

    • 1
    • 2
    • 3
    if (num == ul.children.length - 1) {
                ul.style.left = 0; //没有动画效果，直接跳到第一张图片
                num = 0;
            }

    • 1
    • 2
    • 3
    • 4
    //  封装右按钮函数
    function arrow_right() {
        if (flag) { //防抖
            flag = false
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * imgWidth, function() {
                flag = true;
            })
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = 'white';
            }
            ol.children[circle].style.backgroundColor = '#00BFFF';
        }

    }
    //封装左按钮函数
    function arrow_left() {
        if (flag) { //防抖
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * imgWidth + 'px';
            }
            num--;
            animate(ul, -num * imgWidth, function() {
                flag = true;
            })
            if (circle == 0) {
                circle = ol.children.length;
            }
            circle--;
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = 'white';
            }
            ol.children[circle].style.backgroundColor = '#00BFFF';
        }
    }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    3、定时播放banner
    timer = setInterval(arrow_right, 2500);

    • 1
    4、鼠标移入停止定时器，移出开启定时器

    鼠标移入左右按钮出现

    bannerimg.addEventListener('mouseover', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
bannerimg.addEventListener('mouseout', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(arrow_right, 2500);
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    附录：
    HTML：

    
"en">


    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    Complexbanner
    "stylesheet" href="./banner.css">
    "stylesheet" href="./img/font-awesome-4.7.0/css/font-awesome.min.css">
    
    



    
    "contain">
        
    "header">
            
    "nav">
                
                
    "cloud">
    
            
    
        
    
        
    "bannerimg">
            "javascript:;" class="arrow-l">"fa fa-chevron-left fa-2x" aria-hidden="true">
            "javascript:;" class="arrow-r">"fa fa-chevron-right fa-2x" aria-hidden="true"> 
            
            
      "circle">
            
    
        
    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    CSS:

    * {
    margin: 0 auto;
    padding: 0 auto;
}

a {
    text-decoration: none;
    color: black;
}

.contain {
    text-align: center;
    margin: 0 auto;
    padding: 0 auto;
}


/* header头部 */

.header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    height: 50px;
    width: 100%;
    background-color: white;
    box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 15%);
}

.nav {
    margin-left: 25%;
    width: 1500px;
    height: 50px;
    line-height: 50px;
}

.header .nav ul li {
    float: left;
    list-style: none;
    margin: 0 20px;
    height: 47px;
    width: 80px;
}

.header .nav ul li:hover {
    color: #00BFFF;
}

.cloud {
    height: 3px;
    width: 80px;
    background-color: #00BFFF;
    /* margin-left: 28.2%; */
    position: absolute;
    left: 536px;
    top: 47px;
}


/* benner部分 */

.bannerimg {
    position: relative;
    left: -40px;
    top: 0;
    width: 1960px;
    height: 660px;
    /* overflow: hidden; */
    /* border: 4px solid red; */
    /* z-index: 1000; */
    /* padding-left: -100px; */
}

.bannerimg img {
    /* margin-left: -40px; */
    width: 1960px;
    height: 660px;
    margin: 0;
    padding: 0;
}

.bannerimg ul {
    width: 900%;
    height: 660px;
    position: absolute;
    left: 0;
    top: 0;
    /* background-color: pink; */
    margin: 0;
    padding: 0;
}

.bannerimg ul li {
    float: left;
    list-style: none;
}

.arrow-l {
    position: absolute;
    left: 50px;
    top: 50%;
    color: rgba(255, 255, 255, .8);
    display: none;
    z-index: 999;
}

.arrow-l :hover {
    color: white;
}

.arrow-r {
    position: absolute;
    right: 16px;
    top: 50%;
    color: rgba(255, 255, 255, .8);
    display: none;
    z-index: 999;
}

.arrow-r :hover {
    color: white;
}

.bannerimg ol {
    position: absolute;
    left: 40%;
    bottom: 2%;
    width: 500px;
    height: 40px;
    z-index: 99;
}

.current {
    background-color: red;
}

.circle li {
    /* position: absolute;
    left: 50%;
    bottom: 10%; */
    width: 50px;
    height: 2px;
    background-color: white;
    cursor: pointer;
    margin: 0 10px;
    float: left;
    list-style: none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149

    JS:
    1、动画animate.js

    //动画函数
//obj 动画绑定对象   traget 目标移动距离   callback回调函数

function animate(obj, target, callback) {

    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //步长 = （目标值-现在位置）/10  取整
        let step = (target - obj.offsetLeft) / 10;
        //大于0向上取整   小于0向下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画定时器
            clearInterval(obj.timer);

            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    2、banner.js

    window.addEventListener('load', function() {
    let bannerMain = document.querySelector('.bannerMain');
    let bannerimg = document.querySelector('.bannerimg');
    let ul = bannerimg.querySelector('ul');
    let ol = bannerimg.querySelector('ol');
    arrow_l = document.querySelector('.arrow-l');
    arrow_r = document.querySelector('.arrow-r');
    img = bannerimg.querySelector('img');

    //菜单栏滑动块
    let cloud = document.querySelector('.cloud');
    let nav = document.querySelector('.nav');
    let lis = nav.querySelectorAll('li');
    let current = 0; //起始位置
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function() {
            animate(cloud, this.offsetLeft);
        })
        lis[i].addEventListener('mouseleave', function() {
            animate(cloud, current);
        })
        lis[i].addEventListener('click', function() {
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.color = '';
            }
            lis[i].style.color = '#00BFFF'
            current = this.offsetLeft;
        })
    }

    //图片的宽度
    let imgWidth = img.offsetWidth;
    //num为左右按钮计数
    let num = 0;
    //circle为小图标计数
    let circle = 0;
    let flag = true; //节流阀 防抖
    //鼠标放在banner上面显示左右按钮
    bannerimg.addEventListener('mouseover', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })

    bannerimg.addEventListener('mouseout', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(arrow_right, 2500);

    })
    //动态生成小圆圈  绑定事件
    for (let i = 0; i < ul.children.length; i++) {
        let li = this.document.createElement('li');
        ol.appendChild(li);
        li.setAttribute('index', i)

        li.addEventListener('mouseover', function() {
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = 'white';
            }
            this.style.backgroundColor = '#00BFFF';

            animate(ul, -imgWidth * i)
            let index = this.getAttribute('index');

            num = index;
            circle = index;
        })
    }
    ol.children[0].style.backgroundColor = '#00BFFF';

    //克隆第一张图片放在最后节点上面
    let firstImg = ul.children[0].cloneNode(true);
    ul.appendChild(firstImg);
    //左右按钮移动轮播图
    arrow_r.addEventListener('click', arrow_right)
    arrow_l.addEventListener('click', arrow_left)

    //自动轮播
    timer = setInterval(arrow_right, 2500);

    //  封装右按钮函数
    function arrow_right() {
        if (flag) { //防抖
            flag = false
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * imgWidth, function() {
                flag = true;
            })

            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = 'white';
            }
            ol.children[circle].style.backgroundColor = '#00BFFF';
        }
    }

    //封装左按钮函数
    function arrow_left() {
        if (flag) { //防抖
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * imgWidth + 'px';

            }
            num--;
            animate(ul, -num * imgWidth, function() {
                flag = true;
            })
            if (circle == 0) {
                circle = ol.children.length;
            }
            circle--;
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = 'white';
            }
            ol.children[circle].style.backgroundColor = '#00BFFF';
        }
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
  • 相关阅读:
    LayUI之CRUD
    轮询和长轮询的区别
    【python】numpy库
    Windows、Mac系统常用的SSH工具软件整理汇总
    云安全—NIST SP 500-292
    模型压缩（一）通道剪枝-BN层
    计算机毕设（附源码）JAVA-SSM基于的小型房屋租赁平台
    Vue 组件和插件：探索细节与差异
    leetcode：207. 课程表
    python基于PHP+MySQL的汽车零配件生产企业ERP生产管理子系统
  • 原文地址：https://blog.csdn.net/weixin_43205774/article/details/126695895