Javascript知识【轮播图和定时弹广告案例&JS样式修改】

目录

1，案例：轮播图

2，JS样式修改【重点】

2.1：className

2.2：style

3，案例：定时弹广告

---

1，案例：轮播图

 需要编写程序，完成自动切换图片功能.。

每2秒切换一次图片。

1. 分析：

关键点：

1. 页面加载完成时：window.οnlοad=function(){};
2. 循环定时器：setInterval(function(){},2000);
3. src属性切换: 图片对象.src=""

步骤：

1. 页面加载完成时，设置一个2秒重复循环定时器
2. 定时器中，每隔2秒，修改图片的src

修改src顺序：1--->2--->3--->1.....

1. 代码实现：

2. <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样式修改【重点】

2.1：className

获取/修改  class属性

若需要元素进行class值的切换，可以使用   元素.className=""; 

2.2：style

修改 style中的CSS代码

若仅需要修改部分css样式：

元素.style="css代码"; // 相当于为元素添加了行内样式

 

3，案例：定时弹广告

 

1. 分析：

关键点：

1、涉及到样式切换（class属性值切换）

元素.className=""

2、一次性定时器

setTimeout(代码,2000);

3、页面加载完成时，启动定时器

window.onload = function(){

};

步骤：

1. 页面加载完成时，启动定时器
2. 该定时器在页面加载完成后两秒，将图片展示出来
3. 图片展示完成后，还需要启动“关闭图片用的”定时器
4. “关闭图片用的”定时器 启动后，将图片隐藏起来

 

1. 代码实现：

2. <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说明：

两个定时器是同时启动的，可能在展示的瞬间关闭。可能先进行关闭，在进行展示，导致无法收回