切换图片例子：
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>
结果：
轮播图
技术分析：
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>
<body onload="init()">
结果：
*注意点：
原文：https://www.cnblogs.com/musecho/p/11012860.html