| 标题 | js动态切换图片的方法 |
| 内容 | 这篇文章主要介绍了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如下： 代码如下: <!DOCTYPE html> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js,css动态切换图片</title> <link href="css/index.css" rel="stylesheet" /> <script type="text/javascript"> function gel(id) { return document.getElementById(id); } function clearLiBg() { var mylis = gel("ulnav").childNodes; for (var i = 0; i < 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 < 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"; }; } } }; </script> </head> <body> <div id="imgsCom"> <img src="images/1.png" id="myimg" /> <ul id="ulnav"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html> 希望本文所述对大家的javascript程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。