前言
这是我学习
WEB-API
的第五天,把今天学到的记录下来,目的是方便以后的复习,知识在于积累,在于记录,希望给我带来帮助的同时,也能帮助到在自学的你,加油！！！
目录
1.定时器
1.1 一次性定时器案例
1.2 非一次性定时器案例-注册协议按钮禁用
1.3 div颜色渐变
1.4 设置div宽度2.封装动画函数
2.1 封装动画函数—-移动元素
3.轮播图
3.1 简单轮播图
3.2 左右焦点的轮播图
3.3 无缝连接的轮播图
3.4 完整的轮播图4.三大系列
4.1 三大系列
4.2 offset系列三组属性-offset系列中的属性
offset系列具体的值5.1 直接通过document获取元素
5.2 图片跟着鼠标飞
1. 定时器
1.1 一次性定时器
所谓一次性定时器，指程序只执行一次，不会执行第二次。同时需要注意，一次性定时器的代码不清除会一直留在内存中，所以需要一个清除内存中定时器代码的按钮。
1.1 一次性定时器
onload：页面加载完成后执行
timeId：返回值:定时器id
setTimeout(函数,时间);—指定函数在指定的毫秒数之后执行
clearTimeout(定时器ID);—清除定时器
代码实现逻辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//页面加载后
window.onload = function () {
//一次性的定时器
var timeId = window.setTimeout(function () {
alert("一次性定时器,我只执行一次");
},1000);
//点击这个按钮,停止这个一次性的定时器
document.getElementById("btn").onclick = function () {
clearTimeout(timeId);
};
};
</script>
</head>
<body>
<input type="button" value="清除一次性定时器按钮" id="btn"/>
</body>
</html>
1.2 协议按钮禁用
var time = 5; 定义临时变量，储存按钮倒计时时间。
timeId; 定时器id
setInterval(函数,时间); 按照指定时间调用函数。setInterval方法会不停地调用函数
time–; 定时器调用一次,在5秒的基础上减去1秒。(计时器)
clearInterval(); 停止定时器
disabled–定义这个属性后input按钮在指定时间内不可用,不可点击。
false表示可以点击按钮了
代码实现逻辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea name="txt" cols="30" rows="10" disabled="disapled">
这里就是随便写的文字,随便写的,世界这么大,我想去看看。
秦始皇,打钱, 汉高祖刘邦,打钱...
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" />
//引入js
<script src="common.js"></script>
<script>
var time = 5;
var timeId = setInterval(function () {
time--;
my$("btn").value = "请仔细阅读协议("+time+")";
if (time <= 0) {
//停止定时器
clearInterval(timeId);
my$("btn").disabled = false;
my$("btn").value = "确定";
}
},1000);
</script>
</body>
</html>
1.3 DIV颜色渐变
获取按钮.注册事件=处理函数
opacity：设置DIV透明级别
代码实现逻辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV背景颜色渐变</title>
<style>
div {
width: 260px;
height: 200px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="背景渐变" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var opacity = 10;
var timeId = setInterval(function () {
opacity--;
if (opacity <= 0) {
clearInterval(timeId);
}
my$("dv").style.opacity = opacity / 10;
},100);
};
</script>
</body>
</html>
1.4 设置DIV宽度
代码实现逻辑：
—-事件里面的width是储存盒子的宽度，定时器调用一次，盒子前进10像素，当盒子走到> 800像素时(盒子宽800px)，清除定时器(停止定时器)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 150px;
background-color: red;
border-radius: 100px;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="变宽" id="btn" />
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var width = 200;
var timeId = setInterval(function () {
width += 10;
if (width == 800) {
clearInterval(timeId);
}
my$("dv").style.width = width+ "px";
},100);
};
</script>
</body>
</html>
2. 封装动画函数
2.1 封装动画函数—-移动元素
positio:absolute; 脱离文档流，移动位置
element 函数参数，接收div元素的id属性
target 函数参数，接收div元素的width属性
element.offsetLeft 元素当前位置
step 移动距离-宽度
Math.abs(); 返回参数的绝对值，如果参数是正数，返回正数。如果是负数，返回相反数
代码逻辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<title>封装动画-移动元素</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin-top: 20px;
}
div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="移动400px" id="btn1" />
<input type="button" value="移动800px" id="btn2" />
<div id="dv"></div>
<script src="common.js"><<