运行效果：
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>图片循环切换</title> 9 <style> 10 .pattern { 11 border: 2px solid; 12 text-align: center; 13 font-size: 20px; 14 width: 100px; 15 height: 45px; 16 border-radius: 15px; 17 } 18 </style> 19 <input type=‘button‘ value=‘下一张‘ id="btn" class="pattern" style="margin-right:1000px "> 20 <script> 21 window.onload = function () { 22 var arr = ["images/1.jpg", "images/2.jpg", "images/3.jpg"]; 23 var button = document.getElementById(‘btn‘) 24 var next = document.getElementById(‘1‘) 25 var i = 0; 26 button.onclick = function () { 27 i++ 28 if (i == arr.length) { 29 i = 0; 30 } 31 next.src = arr[i] 32 33 }; 34 }; 35 36 </script> 37 </head> 38 39 <body> 40 <img src=‘images/1.jpg‘ id=‘1‘> 41 <br /> 42 43 </body> 44 45 </html>