原生js制作匀速动画与轮播图注意事项

最新推荐文章于 2023-03-31 10:18:34 发布

爱早睡的老林

最新推荐文章于 2023-03-31 10:18:34 发布

阅读量336

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/m0_38005587/article/details/81151114

版权

原生js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

笔者最近在创作轮播图，碰到了不少坑，特此分享

1.轮播图需要制作多一张图片作为缓冲，使用cloneNode来实现：

   //1.1必须克隆li标签，用来过渡动画
        $('ul').appendChild(lis[0].cloneNode(true));

2.在制作匀速动画时，我使用以下代码来封装：

function averageAnimation(id,target,speed) {
    //    1.清除定时器
    // 当多次用到同一个这个函数时，定时器最好以属性进行赋值
    var left=$(id).offsetLeft;
    clearInterval($(id).timer);
    //2. 判断方向
    var dir=target>left?speed:-speed;

    $(id).timer=setInterval(function () {
        left+=dir;
        $(id).style.left=left+'px';
        if(Math.abs(target-$(id).offsetLeft)<Math.abs(dir))
        {
            clearInterval($(id).timer);
            $(id).style.left=target+'px';
        }
    },20);
}
//此处封装简化版的$
function $(id) {
    return document.getElementById(id);
}

留意，如果是onmouseover这类函数调用时，必须设置timer为$(id)的一个属性，否则会出现定时器功能叠加。

以下是源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            border: none;
        }
        #box{
            width: 750px;
            height: 320px;
            padding: 20px;
            margin: 50px auto;
            border: 1px solid #ccc;
            position: relative;
        }
        img{
        vertical-align: top;
        }
        #top{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #top ul{
            width: 4500px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #top ul li{
            float: left;
        }
        #bottom{
            position: absolute;
            bottom: 20px;
            right: 20px;
            /*清除行内元素的宽度*/
            font-size: 0;
        }
         ol li{
            width: 20px;
            height: 20px;
            background: skyblue;
             margin-right: 10px;
             border-radius: 50%;
             /*inline-block自带行内元素的宽度扩展*/
             display: inline-block;
             vertical-align: top;
             cursor: pointer;
        }
        .native{
            background: orangered;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="top">
        <ul id="ul">
            <li><img src="imgs/pic01.jpg" alt=""></li>
            <li><img src="imgs/pic02.jpg" alt=""></li>
            <li><img src="imgs/pic03.jpg" alt=""></li>
            <li><img src="imgs/pic04.jpg" alt=""></li>
            <li><img src="imgs/pic05.jpg" alt=""></li>
        </ul>
    </div>
        <ol id="bottom">
        </ol>
</div>
<script src="js/myFuc.js"></script>
<script>
    window.onload=function () {
        //1.获得当前li标签
        var lis=$('ul').children;
        var currentIndex=0,listIndex=0;
        //1.1必须克隆li标签，用来过渡动画
        $('ul').appendChild(lis[0].cloneNode(true));
        //2.对ol进行标签创建
        for(var i=0;i<lis.length-1;i++)
        {
            var li=document.createElement('li');
            $('bottom').appendChild(li);
        };
        //3.第一个选中
        $('bottom').children[0].className='native';
        //4.监听鼠标进入
        var ollis=$('bottom').children;
        for(var i=0;i<ollis.length;i++)
        {
            (function (i) {
                var li=ollis[i];
                //    4.1当进入li时，会进行样式改变
                li.onmouseenter=function () {
                    for (var i = 0; i < ollis.length; i++) {
                        ollis[i].className = "";
                    }
                    this.className =  'native';
                    averageAnimation('ul',-750*i,60);
                }
            })(i)
        };
        //5.自动轮播
        var timer=null;
        timer=setInterval(function () {
            //5.1图动起来
            currentIndex++;
           if(currentIndex>lis.length-1)
           {
               $('ul').style.left=0;
               //注意此处为1，因为是从第2张开始的，所以索引是1
               currentIndex=1;
           }
            averageAnimation('ul',-750*currentIndex,60);
            //5.2索引动起来
            listIndex++;
            if(listIndex>ollis.length-1)
            {
                listIndex=0;
            };
            for (var i = 0; i < ollis.length; i++) {
                ollis[i].className = "";
            }
            ollis[listIndex].className = 'native';
        },1000);
    };
</script>
</body>
</html>

以上为未完整版本，后续将继续更新，欢迎指出缺点

爱早睡的老林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js制作匀速动画与轮播图注意事项

笔者最近在创作轮播图，碰到了不少坑，特此分享1.轮播图需要制作多一张图片作为缓冲，使用cloneNode来实现： //1.1必须克隆li标签，用来过渡动画 $('ul').appendChild(lis[0].cloneNode(true));2.在制作匀速动画时，我使用以下代码来封装：function averageAnimation(id,target,...
复制链接

扫一扫

专栏目录