js动态切换图片的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 原生JS实现隐藏显示图片 JS实现点击切换图片效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • JavaScript实现自动切换图片代码

    本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • 使用JavaScript实现点击循环切换图片效果

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • JavaScript简单实现鼠标移动切换图片的方法

    本文实例讲述了JavaScript简单实现鼠标移动切换图片的方法.分享给大家供大家参考,具体如下: <title>JavaScript切换图片</title> <script> function showDaTu(src){ document.getElementById("defaultImg").src=src; } </script> <img src="images/wall1.jpg" id="

  • 图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

    本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="

  • JS鼠标滑过图片时切换图片实现思路

    在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t

  • js动态切换图片的方法

    本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下: 复制代码 代码如下: * {      margin: 0px;padding: 0px;  }    body {      width: 632px;      /*background-color: blue;*/      margin: 0 auto;  }    #imgsCom {      background-color: yellow;      /*相对定位,为了下

  • Jquery实现动态切换图片的方法

    本文实例讲述了Jquery实现动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • JS动态修改图片的URL（src）的方法

    本文实例讲述了JS动态修改图片的URL(src)的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myImage").src="hackanm.gif"; }

  • JavaScript通过select动态更换图片的方法

    本文实例讲述了JavaScript通过select动态更换图片的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片 ... <script language="JavaScript" type="text/javascript" > function setBeerIcon() { var beerIcon = doc

  • jQuery定义背景动态切换效果的方法

    本文实例讲述了jQuery定义背景动态切换效果的方法.分享给大家供大家参考.具体如下: 通过下面的jQuery插件,你可以将图片放在一个数组里,然后告诉jQuery图片需要在什么地方背景轮换 (function($){ var defaultSettings; var divfg, divbg; var fadeInterval; var fqTimer; var currImg = 0; var displImg = 0; var running = false; // Setup setti

  • Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片: 2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解,只是拿过

  • AngularJS实现动态切换样式的方法分析

    AngularJS实现动态切换样式的方法分析

    本文实例讲述了AngularJS实现动态切换样式的方法.分享给大家供大家参考,具体如下: AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢. 本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点) Ok.,实现过程 1. html代码 <!--推荐或热点标题--> <div class="comTitStyle"> <div> <a ng-

  • javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

    本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

随机推荐