<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片库</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width,user-scalable=no"> <style type="text/css"> </style> </head> <body> <h1 style="text-align:center;">图片库的实现</h1> <div> <ul id="imgs"> <li><a href="img/img1.png" >一世繁华</a></li> <li><a href="img/img2.png" >大好河山</a></li> <li><a href="img/img3.png" >青春.女人</a></li> </ul> <img id="placeholder" src="img/img4.png" /> </div> <script type="text/javascript"> function showPic(whichPic){ var source = whichPic.getAttribute('href'); var placeholder = document.getElementById('placeholder'); placeholder.src = source; } var imgs = document.getElementById('imgs').getElementsByTagName('a'); for ( var i = 0; i < imgs.length; i++ ) { imgs[i].onclick=function (e){ if ( e && e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false; } showPic(this); } } </script> </body> </html>
这是最基本的图片切换，对于我，唯一的重点就是阻止默认行为的应用