昨天花了一天时间做了一个类似于百度图片的切换功能，同时呢，考虑浏览器性能上为题做了一些向下兼容：首先我们建一个index.html文件，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实战</title> <script src="js/app.js"></script> <script> window.onload = function() { prepareGallery(); } </script> </head> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <li> <a href="images/Banner_01.png" title="1">第一张</a> </li> <li> <a href="images/Banner_02.png" title="2">第二张</a> </li> <li> <a href="images/Banner_03.png" title="3">第三张</a> </li> </ul> <img id="placeholder" src="images/Banner_04.png" alt="默认图片" /> <p id="description"> Choose an image </p> </body> </html>接下来新建一个app.js文件，代码如下：
function prepareGallery() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById('imagegallery')) return false; var gallery = document.getElementById('imagegallery'); var links = gallery.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = function() { return showPic(this) ? false : true; } } } function showPic(whichpic) { if (!document.getElementById('placeholder')) return false; var source = whichpic.getAttribute('href'); var placeholder = document.getElementById('placeholder'); if (placeholder.nodeName != "IMG") return false; placeholder.setAttribute('src', source); if (document.getElementById('description')) { var text = whichpic.getAttribute('title') ? whichpic.getAttribute('title') : ''; var description = document.getElementById('description'); if (description.firstChild.nodeType == 3) { description.firstChild.nodeValue = text; } }; return true; }到这里，一个类似于百度图片的图片库就出来了，结合后台接口，稍加改进就能做成自己想要的结果了。
