js小例子

最新推荐文章于 2023-04-06 17:17:16 发布

qingchurenxiaoyao

最新推荐文章于 2023-04-06 17:17:16 发布

阅读量271

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qingchurenxiaoyao/article/details/77127307

版权

如图布局，点击右边的小图，右边的小图会和左边的大图交换位置。

关键代码：
function show(obj){
var bigimg=document.getElementById(“bigsrc”);
var bigsrc=bigimg.src;
bigimg.src=obj.src;
alert(bigimg.src);
obj.src=bigsrc;
}
重要知识点：
如何在js中获得图片的src?
a .找到图片这个对象(bigimg)。
b .获得src(bigimg.src)。
源代码如下：

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <meta name="viewport" id="viewport" content="target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1" />
     <title></title>
</head>
<style type="text/css"> 
ul{height:100%;list-style:none;} 
ul li{height:25%;} 
ul li img{height:100%;} 
</style> 
<body> 
    <div id="bigimg" style="height:366px;width:650px;float:left; position:relative;"> 
        <img src="./images/big1.jpg" id="bigsrc" style="width:100%;height:100%; position:absolute;"/> 
    </div> 
    <div id="smimg" style="height:366px;"> 
        <ul> 
            <li class="meng"><img src="./images/big2.jpg" onclick="show(this)"/></li> 
            <li class="meng"><img src="./images/big3.jpg" onclick="show(this)"/></li> 
            <li class="meng"><img src="./images/big4.jpg" onclick="show(this)"/></li> 
            <li class="meng"><img src="./images/big5.jpg" onclick="show(this)"/></li> 
        </ul> 
    </div> 
<script src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript"> 
  function show(obj){
    var bigimg=document.getElementById("bigsrc");
    var bigsrc=bigimg.src;
    bigimg.src=obj.src;
    alert(bigimg.src);
    obj.src=bigsrc;
    }
</script>
</body>
</html>

qingchurenxiaoyao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js小例子

如图布局，点击右边的小图，右边的小图会和左边的大图交换位置。关键代码： function show(obj){ var bigimg=document.getElementById(“bigsrc”); var bigsrc=bigimg.src; bigimg.src=obj.src; alert(bigimg.src); obj.src=bigsrc; } 重要知识点：
复制链接

扫一扫