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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
基于vue实现分页效果
Nov 06 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
围观tangram js库
2010/12/28 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python实现接口并发测试脚本
2019/06/25 Python
python 瀑布线指标编写实例
2020/06/03 Python
python中rc1什么意思
2020/06/19 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
什么是Web Service?
2012/07/25 面试题
工厂搬迁方案
2014/05/11 职场文书
养牛场项目建议书
2014/05/13 职场文书
大四学生个人总结
2015/02/15 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Django中session进行权限管理的使用
2021/07/09 Python
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB