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限制文本框为整数和货币的函数代码
Oct 13 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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实现的功能是显示8条基色色带
2006/10/09 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
Jquery 扩展方法
2010/05/06 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python实现的购物车功能示例
2018/02/11 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
浅析python标准库中的glob
2020/03/13 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
局域网定义和特性
2016/01/23 面试题
翻译专业应届生求职信
2013/11/23 职场文书
土建资料员岗位职责
2014/01/04 职场文书
高考备战决心书
2014/03/11 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
建党伟业观后感
2015/06/01 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL