js动态切换图片的方法


Posted in Javascript onJanuary 20, 2015

本文实例讲述了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="http://www.w3.org/1999/xhtml">  

<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" style="width: 632px; height: 412px;">  

        <img src="images/1.png" id="myimg" style="width: 632px; height: 412px; " />  

        <ul id="ulnav">  

            <li>1</li>  

            <li>2</li>  

            <li>3</li>  

        </ul>  

    </div>  

</body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
JavaScript 基本概念
Jan 20 #Javascript
自己动手手写jQuery插件总结
Jan 20 #Javascript
JavaScript学习心得之概述
Jan 20 #Javascript
DOM基础教程之使用DOM
Jan 19 #Javascript
DOM基础教程之模型中的模型节点
Jan 19 #Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 #Javascript
javascript正则表达式之search()用法实例
Jan 19 #Javascript
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python字典的值可以修改吗
2020/06/29 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
大学生优秀的自我评价分享
2013/10/22 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
先进党组织事迹材料
2014/12/26 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL