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 相关文章推荐
一个简单的js动画效果代码
Jul 20 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
vue.js封装switch开关组件的操作
Oct 26 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字符串截取问题
2006/11/28 PHP
第六章 php目录与文件操作
2011/12/30 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php实现删除空目录的方法
2015/03/16 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
javascript整除实现代码
2010/11/23 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
玩转方法:call和apply
2014/05/08 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
基于Python解密仿射密码
2019/10/21 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
科研先进个人典型材料
2014/01/31 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
志愿者个人总结
2015/03/03 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL