0324 JS

来源：互联网发布：msde和sql 编辑：程序博客网时间：2024/06/01 23:49

运动

闪动,直接赋值
匀速运动,num=num+n(n为常数)

缓动（先快后慢，或者先慢后快）num = num + (终值-num)/10;结果会无限接近终值，但不能达到终值,所以最后最好加一个判定条件让值最后到达目标值，否值会一直处于无限循环计算状态。示例代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #move{            width: 100px;            height: 100px;            background-color: red;            position: relative;        }    </style></head><body>    <div id="move"></div>    <script>        var move = document.getElementById('move');        var num = 0;        function Move(){            if(num<499){ //若不需要严格到达目标值500，设置比500小即可                // 先快后慢缓动                num = num +(500-num)/50;                move.style.left= num +"px"            }            //到达一定条件跳出上面无限逼近的计算；            else if(num>499){                num = 500;                move.style.left= num +"px";                clearInterval(t);            }        }        var t = setInterval(Move,10)//定时器调用函数    </script></body></html>

无缝的关键是，第1张图在末尾还要拼接1次；（如果banner宽度可以呈现多少张，就要在末尾拼接多少张）

如下为轮播4张图的代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>无缝滚动</title>    <style>        *{            margin: 0;            padding: 0;        }        #box{            width: 600px;            height: 200px;            margin: 50px  auto 0;            position: relative;            overflow: hidden;        }        #content{            width: 1800px;            height: 200px;            position: absolute;        }        #content li{            list-style-type: none;            float: left;        }    </style></head><body>    <div id="box">        <ul id="content">            <li><img src="01.jpg" alt=""></li>            <li><img src="02.jpg" alt=""></li>            <li><img src="03.jpg" alt=""></li>            <li><img src="04.jpg" alt=""></li>            <!-- 为了实现无缝连接，重复出现两张图，这样跳转的时候才不会出现断层的现象 -->            <li><img src="01.jpg" alt=""></li>            <li><img src="02.jpg" alt=""></li>        </ul>    </div>    <script>        var content = document.getElementById('content');        var box = document.getElementById('box');        function move(){            var Left_value = content.offsetLeft;            // 对于判定条件的设定，仍然是4张图的宽度，而不是6张            if(Left_value>-1200){                Left_value--;                content.style.left=Left_value+"px";            }            else if(Left_value=-1200){                Left_value = 0;                content.style.left=Left_value+"px";            }        }        // 利用定时器重复执行移动函数，实现无缝滚动        function star(){            var t = setInterval(move,10);            // 鼠标悬浮时跳出定时器，必须写在执行移动的函数内部            box.onmouseover = function(){                clearInterval(t);            }        }        star();//初次启动函数        //鼠标离开时，执行移动函数        box.onmouseout = function(){            star();        }    </script></body></html>

1 0

0324 JS

运动

无缝banner图：