运动
- 闪动,直接赋值
- 匀速运动,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>
无缝banner图:
无缝的关键是,第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>