js实例-点击小图换大图的代码

发布时间:2019-08-12编辑:脚本学堂
为大家介绍一个js的实例,实现点击小图换大图的效果,有需要的朋友,可以参考下。

1、js代码

<script type="text/javascript">
/**
 * 点击小图换大图
 * by http://www.jb200.com
*/
window.onload=function()
{
    var obig=document.getElementById('big').getElementsByTagName('img');
    var osmall=document.getElementById('small').getElementsByTagName('img');
    var i=0;
    for(i=0;i<osmall.length;i++)
    {
        osmall[i].onclick=function()
        {
            obig[0].src=this.src;//点击小图获取大图路劲
        };
    };
    
};
</script>

2、html页面内容

<div id="big">
   <img src="images/1.jpg" />
</div>
<div id="small">
    <img src="images/1.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
    <img src="images/4.jpg" />
</div>