目录
1，案例：轮播图
需要编写程序，完成自动切换图片功能.。
每2秒切换一次图片。
- 分析：
关键点：
- 页面加载完成时：window.οnlοad=function(){};
- 循环定时器：setInterval(function(){},2000);
- src属性切换: 图片对象.src=""
步骤：
- 页面加载完成时，设置一个2秒重复循环定时器
- 定时器中，每隔2秒，修改图片的src
修改src顺序：1--->2--->3--->1.....
- 代码实现：
-
<script>
var num = 2;
window.onload=function () {
setInterval(function () {
//1、获取图片对象
var lbt = document.getElementById("lbt");
//2、修改图片的src
lbt.src="img/"+(num++)+".jpg";
//对Num维护，只能是1---》2---》3----》1....
if(num==4){
num=1;
}
},2000);
};
</script><!-- 网站大轮播图 -->
<tr>
<td>
<img id="lbt" src="img/1.jpg" width="100%"/>
</td>
</tr>
2，JS样式修改【重点】
<!DOCTYPE html> |
2.1：className
获取/修改 class属性
<!DOCTYPE html> |
若需要元素进行class值的切换，可以使用 元素.className="";
2.2：style
修改 style中的CSS代码
<!DOCTYPE html> |
若仅需要修改部分css样式：
元素.style="css代码"; // 相当于为元素添加了行内样式
3，案例：定时弹广告
- 分析：
关键点：
1、涉及到样式切换（class属性值切换）
元素.className=""
2、一次性定时器
setTimeout(代码,2000);
3、页面加载完成时，启动定时器
window.onload = function(){
};
步骤：
- 页面加载完成时，启动定时器
- 该定时器在页面加载完成后两秒，将图片展示出来
- 图片展示完成后，还需要启动“关闭图片用的”定时器
- “关闭图片用的”定时器 启动后，将图片隐藏起来
- 代码实现：
-
<script>
//1、页面加载完成时，启动定时器
window.onload = function () {
//2、该定时器在页面加载完成后两秒，将图片展示出来
setTimeout(function () {
//2.1、获取图片对象
var img = document.getElementById("ad");
//2.2、修改图片对象的className 为showImg
img.className = "showImg";
//3、图片展示完成后，还需要启动“关闭图片用的”定时器
setTimeout(function () {
//4、“关闭图片用的”定时器 启动后，将图片隐藏起来
img.className = "hiddenImg";
},2000);
},2000);
};
</script>
BUG说明：
两个定时器是同时启动的，可能在展示的瞬间关闭。可能先进行关闭，在进行展示，导致无法收回