一、轮播图
1.传统轮播图：
运动的封装：
（1）定时器的使用，创建定时器setInterval()；每隔指定的时间执行代码。
取消计时器 clearInterval(函数)方法可取消由 setInterval() 设置的交互时间。所以我们就可以创建一个简单的动画轮播图：
<body>
<script>
window.onload=init;
var i=1;
function init(){
window.setInterval("fun()",1000)
}
function fun(){
i++;
if (i>5)
{
i=1;
}
var oImage=document.getElementById("d1");
oImage.src="传统轮播/img/"+i+".jpg"
}
</script>
要是想终止运动，直接在定时器内部，判断到达目标值，进行清除定时器就可以！
2.运动封装函数的调用：
封装运动函数就要写1个函数的使用说明，告诉我们调用者，该如何怎么函数
需要3个参数：
- 参数1 obj 对象 代表需要移动的物体
- 参数2 target 数字 代表物体移动的终止位置
- 参数3 cb 函数 物体运动完成之后，自动调用 cb
（1）封装函数的多个属性情况：
a.得到物体当前样式值
// opacity --> 可能是 left、width、 height ==> 用1个函数参数来替代
var current = parseFloat(obj.style[attr]);
console.log(current)
if (attr == "opacity") {
// 透明度 统一成 100 进制
current *= 100
b. 判断当前样式值是否等于目标值
c.速度变化
d.更改样式值
（2）对象中属性的访问方式 ：
var stu = {}
stu.name = "Jack"
//console.log(stu.name)
var k = "name"
// stu[k] 代表是 访问 stu对象中 变量k所代表的 属性
// stu name 属性 ==> Jack
// stu["name"] 代表是 访问 stu 对象中 name 属性
// stu[name] 代表是 访问 stu 对象中 变量name所代表的 属性
console.log( stu[k] )
// stu[height] 代表 访问 stu对象中 变量height 所代表的 属性
// stu["height"] 代表 访问 stu对象中 height 属性
// stu.height 代表 访问 stu对象中 height 属性
3.新动画算法：
A（缓冲运动）：
(1) 获取div的Id
(2)帧编号，从1开始
(3)创建定时器
(4)计算当前帧的位置: 通过缓冲计算函数来进行计算: 帧编号、起始位置、变化量 、 总帧数
（5）到目标帧了，终止计时器。指向下一帧
【注意】调用动画函数的间隔时间，要远大于动画运行时间。
网友评论