功能描述：
- 点击下一张换到下一张图片。
- 点击上一张换到上一张图片。
- 等到最后一张时，再点击下一张呈现第一张图片。
实现效果：
https://www.bilibili.com/video/BV1LF411G72N?t=8.1
图片切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片切换</title> <style> /* 给图片设置同样的宽和高 */ img { width: 200px; height: 200px; } /* 给按钮设置精美的样式*/ button { width:98px; height: 40px; background: skyblue; color: white; border: 0; } </style> </head> <body> // 放入第一张图片 <img src="../imgs/Baymax1.png" id="baymax"> <br> <button id='prev'>上一张</button> <button id='next'>下一张</button> <script> // 1.获取事件源 var baymax = document.querySelector('#baymax') var nextBtn = document.querySelector('#prev') var prevBtn = document.querySelector('#next') // 初始化 最小索引、最大索引和当前索引 var minIndex = 1 var maxIndex = 4 var currentIndex = minIndex // 2.监听按钮的点击 (下一张) nextBtn.onclick = function(){ // 当前索引等于最大索引时，把当前索引修改为最小索引 if(currentIndex === maxIndex){ currentIndex = minIndex }else{ // 当前索引每次+1 currentIndex++ } // 改变 baymax 图片的 src 属性 baymax.setAttribute('src','../imgs/Baymax'+ currentIndex +'.png') } // 监听按钮的点击 (上一张) prevBtn.onclick = function(){ if(currentIndex === minIndex){ currentIndex = maxIndex }else{ currentIndex-- } baymax.setAttribute('src','../imgs/Baymax'+ currentIndex +'.png') } </script> </body> </html>
注意点：
图片的地址要设置成连续的，比如 'Baymax1.png'、'Baymax2.png'，便于获取和呈现图片。
currentIndex 的作用是来定位到我们想得到的图片，利用 + 拼接的方法，改变图片的地址。
setAttribute()：用于创建或改变某个新属性。此处的作用就是改变图片的地址。[ 参考链接 ]
