js动态切换图片的方法.pdfVIP

这篇文章主要介绍了 js 动态切换图片的方法 ,包含完整的 css 文件与 js 文件实现技巧 ,非 常具有实用价值 ,需要的朋友可以参考下 本文实例讲述了 js 动态切换图片的方法。分享给大家供大家参考。具体实现方法如下： index.css 文件如下： 代码如下 : * { margin: 0px;padding: 0px; } body { width: 632px; /*background-color: blue;*/ margin: 0 auto; } #imgsCom { background-color: yellow; /* 相对定位，为了下层可以使用绝对定位时以本 div 的原点为原点 */ position: relative; } #ulnav{ list-style-type: none; position: absolute; /* 使用以 imgsCom 为原点来绝对定位到右下角 */ bottom: 0px; right: 0px; } #ulnav li{ list-style-type: none; float: left; background-color: black; color: white; margin-right: 5px; width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; } index.html 如下： 代码如下 : lt;!DOCTYPE htmlgt; lt;html xmlns=gt; lt;headgt; lt;meta http-equiv=Content-Type content=text/html; charset=utf-8 /gt; lt;titlegt;js,css 动态切换图片 lt;/titlegt; lt;link href=css/index.css rel=stylesheet /gt; lt;script type=text/javascriptgt; function gel(id) { return document.getElementById(id); } function clearLiBg() { var mylis = gel(ulnav).childNodes; for (var i = 0; i lt; mylis.length; i++) { if (mylis[i].nodeType == 1) { mylis[i].style.backgroundColor = black; } } } window.onload = function() { //给三个 li 都指定一个属性 var lis = gel(ulnav).childNodes; for (var i = 0; i lt; lis.length; i++) { if (lis[i].nodeType == 1) { lis[i].onclick = function () { // 更换图片 gel(myimg).setAttribute(src, images/ + this.innerHTML + .png); //所有 LI 颜色复原 clearLiBg(); // 更换 LI 背景标签颜色 this.style.backgroundColor = silver; }; } } }; lt;/scriptgt; lt;/head