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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
学习php开源项目的源码指南
2014/12/21 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
javascript知识点收藏
2007/02/22 Javascript
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
python学习 流程控制语句详解
2016/06/01 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
浅述python2与python3的简单区别
2018/09/19 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python中的引用知识点总结
2019/05/20 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
英国电子专家:maplin
2019/09/04 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
竞选班长演讲稿
2013/12/30 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
门店业绩提升方案
2014/06/08 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android