• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
ninali
此时需要的是坚持~坚持
博客园    首页    新随笔    联系   管理    订阅  订阅
js基础练习---点击小图换大图
<script type="text/javascript">
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>

 

<div id="big">
   <img src="示例图片/1.jpg" />
</div>
<div id="small">
    <img src="示例图片/1.jpg" />
    <img src="示例图片/2.jpg" />
    <img src="示例图片/3.jpg" />
    <img src="示例图片/4.jpg" />
</div>

 

 

 

 

 

 

 

posted on 2013-04-15 11:53  ninali  阅读(784)  评论(2)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3