js小例子

最新推荐文章于 2025-05-22 11:36:36 发布

原创最新推荐文章于 2025-05-22 11:36:36 发布 · 309 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

关键代码：
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>