图片切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片切换</title> 6 </head> 7 <body> 8 <button id="prev" style="margin-bottom: 10px">上一张</button> 9 <button id="next" style="margin-bottom: 10px">下一张</button> 10 <button id="toggle" style="margin-bottom: 10px">隐藏</button> 11 <img src="./images/image01.jpg" id="gf" style="height: 500px; 400px;display: block"> 12 </body> 13 <script type="text/javascript"> 14 function $(id) { 15 return document.getElementById(id); 16 } 17 window.onload = function () { 18 var gf = $('gf'); 19 var prev = $('prev'); 20 var next = $('next'); 21 var tog = $('toggle'); 22 var isShow = true; 23 var patt = /[1-4]+/ig; 24 // 图片切换下一张 25 next.onclick = function () { 26 var src = gf.getAttribute('src'); 27 var num = Number(src.match(patt)[0]); 28 if(num != 4){ 29 gf.src = src.replace(patt,(num+1).toString()) 30 }else{ 31 gf.src = './images/image01.jpg' 32 } 33 }; 34 // 图片切换上一张 35 prev.onclick = function () { 36 var src = gf.getAttribute('src'); 37 var num = Number(src.match(patt)[0]); 38 if(num != 1){ 39 gf.src = src.replace(patt,(num-1).toString()) 40 }else{ 41 gf.src = './images/image04.jpg' 42 } 43 }; 44 // 显示和隐藏图片 45 tog.onclick = function () { 46 if(isShow){ 47 gf.style.display = 'none'; 48 this.innerText = '显示'; 49 isShow = false; 50 }else{ 51 gf.style.display = 'block'; 52 this.innerText = '隐藏'; 53 isShow = true; 54 } 55 } 56 57 } 58 </script> 59 </html>
衣服相册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>衣服相册</title> <style type="text/css"> *{ margin: 0; padding:0; } .smallImg{ margin-left: 10px; margin-top: 20px; border: 2px solid #fff; height:50px; width:50px; float: left; } ul { list-style: none; overflow: hidden; } </style> </head> <body> <img src="images/1.jpg" id="img"> <ul> <li><a href=""><img src="images/1.jpg" class="smallImg"></a></li> <li><a href=""><img src="images/2.jpg" class="smallImg"></a></li> <li><a href=""><img src="images/3.jpg" class="smallImg"></a></li> <li><a href=""><img src="images/4.jpg" class="smallImg"></a></li> <li><a href=""><img src="images/5.jpg" class="smallImg"></a></li> </ul> </body> <script type="text/javascript"> window.onload = function () { var imgBig = document.getElementById('img'); var imgLi = document.getElementsByClassName('smallImg'); for(var i = 0; i < imgLi.length; i ++){ imgLi[i].onmouseover = function () { for(var j = 0; j < imgLi.length; j ++){ imgLi[j].style.border = '2px solid #fff'; } this.style.border = '2px solid red'; imgBig.src = this.src; } } } </script> </html>