1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #box { 8 1200px; 9 margin: 0 auto; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box"> 15 <img id="icon" src="img/icon_01.png" alt=""> 16 <p></p> 17 <button id="prev">上一张</button> 18 <button id="next">下一张</button> 19 </div> 20 <script> 21 window.onload = function (ev) { 22 // 1) 获取标签 23 var icon = document.getElementById('icon'); 24 var prev = document.getElementById('prev'); 25 var next = document.getElementById('next'); 26 27 // 2) 点击 28 var currentIndex = 1, minIndex = 1, maxIndex = 9; 29 prev.onclick = function (ev1) { 30 if(currentIndex === minIndex){ // 最小边界 31 currentIndex = maxIndex; 32 }else { 33 currentIndex--; 34 } 35 icon.setAttribute('src', 'img/icon_0'+ currentIndex + '.png'); 36 console.log(icon.src); 37 38 }; 39 40 next.onclick = function (ev1) { 41 if(currentIndex === maxIndex){ // 最大边界 42 currentIndex = minIndex; 43 }else { 44 currentIndex++; 45 } 46 icon.setAttribute('src', 'img/icon_0'+ currentIndex + '.png'); 47 console.log(icon.src); 48 } 49 } 50 </script> 51 </body> 52 </html>
//点击上一张、下一张切换图片
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{margin: 50px;} 9 #fj{list-style: none;} 10 #fj li{float: left;margin-left: 10px;} 11 #big_img{margin-left: 10px;} 12 #des{margin: 10px;color: orangered;font-size: 20px;} 13 </style> 14 </head> 15 <body> 16 <!--大图描述--> 17 <p id="des">蒲公英</p> 18 <!--大图展示--> 19 <img id="big_img" src="img/1.jpg" alt="" width="540"> 20 <!--小图列表--> 21 <ul id="fj"> 22 <li> 23 <a href="img/1.jpg" title="蒲公英"> 24 <img src="img/1.jpg" width="100" alt="蒲公英"> 25 </a> 26 </li> 27 <li> 28 <a href="img/2.jpg" title="热气球"> 29 <img src="img/2.jpg" width="100" alt="热气球"> 30 </a> 31 </li> 32 <li> 33 <a href="img/3.jpg" title="别致小屋"> 34 <img src="img/3.jpg" width="100" alt="别致小屋"> 35 </a> 36 </li> 37 <li> 38 <a href="img/4.jpg" title="高山湖水"> 39 <img src="img/4.jpg" width="100" alt="高山湖水"> 40 </a> 41 </li> 42 <li> 43 <a href="img/5.jpg" title="高速公路"> 44 <img src="img/5.jpg" width="100" alt="高速公路"> 45 </a> 46 </li> 47 </ul> 48 <script> 49 window.onload = function (ev) { 50 // 1. 获取需要的标签 51 var des = document.getElementById('des'); 52 var big_img = document.getElementById('big_img'); 53 var fj = document.getElementById('fj'); 54 var aLists = fj.getElementsByTagName('a'); 55 console.log(aLists); 56 57 // 2. 事件绑定 58 for (var i = 0; i < aLists.length; i++) { 59 var a = aLists[i]; 60 // console.log(a); 61 a.onclick = function (ev1) { 62 console.log(this); 63 des.innerText = this.title; 64 big_img.setAttribute('src', this.href); 65 // 阻止执行默认事件 a 66 return false; 67 } 68 } 69 } 70 </script> 71 </body> 72 </html>
//点击下方的小图，切换上面的大图