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 学习初步 入门教程
Mar 25 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
javascript中this指向详解
Apr 23 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
JS实现多功能计算器
Oct 28 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实例分享之html转为rtf格式
2014/06/02 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
babel基本使用详解
2017/02/17 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
AJax面试题
2014/11/25 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
初中作文评语大全
2014/04/23 职场文书
教师节演讲稿
2014/05/06 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
房屋授权委托书范本
2014/10/07 职场文书
毕业生评语大全
2015/01/04 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL