190713_JavaScript小案例_图片切换
这一阵老大让我来搞搞前端，维护一下产品，问题是前端我也是一窍不通啊，研究了两天Html和Js，简单的写两个小例子练练手
这个例子要实现的效果图就是这个样子的
点击上一张或者下一张，实现图片的切换和上面文字的显示
代码很简单，直接贴出来：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>图片切换</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #outer { 13 width: 500px; 14 margin: 50px auto; 15 padding: 10px; 16 background-color: yellowgreen; 17 text-align: center; 18 } 19 20 #outer #pic { 21 width: 500px; 22 height: 250px; 23 } 24 </style> 25 <script type="text/javascript"> 26 window.onload = function() { 27 var prev = document.getElementById("prev"); 28 var next = document.getElementById("next"); 29 var img = document.getElementsByTagName("img")[0]; 30 // 数组对象,用来存放所有照片 31 var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"] 32 var index = 0; 33 var info = document.getElementById("info"); 34 info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张" 35 // 切换上一张图片函数 36 prev.onclick = function() { 37 index--; 38 if (index < 0) { 39 index = imgArr.length - 1; 40 } 41 img.src = imgArr[index]; 42 info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张" 43 } 44 // 切换下一张图片函数 45 next.onclick = function() { 46 index++; 47 if (index > imgArr.length - 1) { 48 index = 0; 49 } 50 img.src = imgArr[index]; 51 info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张" 52 } 53 } 54 </script> 55 </head> 56 <body> 57 <div id="outer"> 58 <p id="info"></p> 59 <img src="img/1.jpg" id="pic"> 60 <button type="button" id="prev" alt='haha'>上一张</button> 61 <button type="button" id="next">下一张</button> 62 </div> 63 </body> 64 </html>
