您的位置：首页 > Web前端 > JavaScript

0324 JS

2017-03-24 21:23 225 查看

运动

闪动,直接赋值

匀速运动,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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 轮播图

相关文章推荐

新的分享

章节导航