轮播图心得

一、轮播图

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)到目标帧了,终止计时器。指向下一帧
【注意】调用动画函数的间隔时间,要远大于动画运行时间。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,185评论 6 13
  • 轮播图实现想法 轮播图一个基础的js动画效果,我感觉很low了,其一都在用,其二原理都差不多,其三我没有心得啊!!...
    Nicholas明阅读 757评论 0 1
  • 20- 枚举,枚举原始值,枚举相关值,switch提取枚举关联值 Swift枚举: Swift中的枚举比OC中的枚...
    iOS_恒仔阅读 2,314评论 1 6
  • 轮播图有多种多样的形式,但是本质是类似的。对于传统轮播图来说,步骤基本如下: 1:建立一个最大的div,里面...
    qzuser_1d64阅读 1,260评论 0 0
  • 思路: 1.点击按钮,改变显示的图片。同时改变对应小圆点的颜色。 2.点击小圆点,改变小圆点颜色,显示对应的图片。...
    这就是小七de简书阅读 488评论 0 0