1.切换图片例子：
事件（onclick）
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>切换图片</title> 7 <style> 8 div { 9 border: 1 px solid white; 10 width: 500px; 11 height: 350px; 12 margin: auto; 13 14 /**文字居中*/ 15 text-align: center; 16 } 17 </style> 18 </head> 19 <script> 20 var i = 1; 21 function changeImg() {//两张图片循环播放 22 i++; 23 document.getElementById("img1").src = "../../img/" + i + ".jpg"; 24 if (i == 2) { 25 i = 0; 26 } 27 } 28 </script> 29 30 <body> 31 <div> 32 <input type="button" value="下一张" onclick="changeImg()" /> 33 <img src="../../img/1.jpg" width="" id="img1" /> 34 </div> 35 </body> 36 37 </html>
结果：
2.轮播图
技术分析：
获取元素 document.getElementById(“id 名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000); //第二个参数是毫秒
步骤分析：
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)
*注意：循环时最后一个图片要重置。
*注意点：
- 在body标签内写onload
- window.setInterval("changeImg()", 3000); //window可以省略不写
- document.getElementById("img1").src = "../img/" + i + ".jpg"; /**获取图片位置并设置src属性值*/
代码实现
JS部分：
1 <script> 2 function init() { 3 //书写轮播图片显示的定时操作(3秒) 4 window.setInterval("changeImg()", 3000); //window可以省略不写 5 } 6 7 //书写函数 8 var i = 0; 9 10 function changeImg() { 11 i++; 12 //获取图片位置并设置src属性值 13 document.getElementById("img1").src = "../img/" + i + ".jpg"; 14 if (i == 2) { 15 i = 0; 16 } 17 } 18 </script>
HTML部分：（在指定位置定义 id）
<body onload="init()">
<!--3.轮播图片--> <div id=""> <img src="../img/1.jpg" width="100%" id="img1" /><!--记得加上id--> <!--设置id--> </div>