JS循环添加时间的参数问题

<div id="showimg" style="overflow:hidden;text-align:center;position:absolute;background:#fff;width:700px;height:550px;z-index:1001;">
  <div id='smallpic' style="overflow:auto;margin-left:20px;width:150px;height:500px;background:#D2EDF6;float:left;display:inline;">
     <ul style="list-style:none;">
      <li><img src="worksjpg/0.jpg" style="width:90px;height:90px;"></img></li>
              <li><img src="worksjpg/1.jpg" style="width:90px;height:90px;"></img></li>
      <li><img src="worksjpg/2.jpg" style="width:90px;height:90px;"></img></li>
      <li><img src="worksjpg/3.jpg" style="width:90px;height:90px;"></img></li>
      <li><img src="worksjpg/4.jpg" style="width:90px;height:90px;"></img></li>
</ul>
  </div>
  <img id='bigpic' style="float:right;width:500px;heigth:500px;margin-right:20px;"src=""></img>
</div>
<script>
window.onload=function(){
    var li=document.getElementById('smallpic').getElementsByTagName('img');
var that;
for(var i=0;i<li.length;i++)
  {
  that=li[i];
  //alert(that);
  li[i].onclick=function(that){document.getElementById('bigpic').src=that.src;}
  }
};
</script>以上是点小图切换大图的效果，现在不仅仅要效果，问题是我希望让HTML标签和JS语言彻底分开。也就是以li[i].onclick的形式来添加事件，而不是在onclick写到标签里，可这种情况下，感觉被这些参数搞乱了。一头晕。不知道该如何通过分离代码的方式处理这种点小图看大图的效果，核心就是参数如何传递，如果把onclick写到img里去那很容易，直接写个this.src就过去了。可是分离后我就搞不太明白如何传递了！望指教！谢了！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

俺底层学的不好,
感觉用JQuery可能很简单的<div id="showimg" style="overflow:hidden;text-align:center;position:absolute;background:#fff;width:700px;height:550px;z-index:1001;">
      <div id='smallpic' style="overflow:auto;margin-left:20px;width:150px;height:500px;background:#D2EDF6;float:left;display:inline;">
         <ul style="list-style:none;">
          <li><img src="worksjpg/0.jpg" style="width:90px;height:90px;"></img></li>
              <li><img src="worksjpg/1.jpg" style="width:90px;height:90px;"></img></li>
          <li><img src="worksjpg/2.jpg" style="width:90px;height:90px;"></img></li>
          <li><img src="worksjpg/3.jpg" style="width:90px;height:90px;"></img></li>
          <li><img src="worksjpg/4.jpg" style="width:90px;height:90px;"></img></li>
         </ul>
      </div>
      <img id='bigpic' style="float:right;width:500px;heigth:500px;margin-right:20px;"src=""></img>
    </div>
    <script>
$(function(){
  $("li img").each(){
    $(this).click(function(){
      $("#bigpic").attr("scr", $(this).attr("src"));
    });
  }
});    </script>
//好像写错了,$(function(){
  $("li img").each(function(){
    $(this).click(function(){
      $("#bigpic").attr("scr", $(this).attr("src"));
    });
  });
});
li[i].onclick=function(that){document.getElementById('bigpic').src=that.src;}
改为:
li[i].onclick=function(){document.getElementById('bigpic').src=that.src;}
这个that是多余的
哎，你这个明显没测试过，实际测试去掉了参数that一样没有任何效果！
你的这个没错，但是问题我要的是用原生的JS来实现！如果用JQ，还可以多一种选择：
  $(function(){
     $('#smallpic li').each(function(i){//多加一个参数到里面用！
    $(this).click(function(){
    $('#bigpic').attr("src","worksjpg/"+i+".jpg");
   });
   });
   });
  原生的JS我记得可以实现，好象需要用闭包，我见过一次解决该类问题的原生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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{padding:0;margin:0;}
</style>
</head>
<body>
<div id="showimg" style="overflow:hidden;text-align:center;position:absolute;background:#fff;width:700px;height:550px;z-index:1001;">
<div id='smallpic' style="overflow:auto;margin-left:20px;width:150px;height:500px;background:#D2EDF6;float:left;display:inline;">
<ul style="list-style:none;">
<li><img src="s0111040245730421.jpg" style="width:90px;height:90px;"></img></li>
<li><img src="s1207044922976375.jpg" style="width:90px;height:90px;"></img></li>
<li><img src="s0211092456492698.jpg" style="width:90px;height:90px;"></img></li>
</ul>
</div>
<img id='bigpic' style="float:right;width:500px;heigth:500px;margin-right:20px;"src=""></img>
</div>
<script type="text/javascript">
(function(list, bigPic) {
var _len = list.length;
for(var i = 0; i < _len; i++) {
(function(obj) {
var src = obj.getElementsByTagName('img')[0].src;
obj.onclick = function() {
bigPic.src = src;
}
})(list[i]);
}
})(document.getElementById('smallpic').getElementsByTagName('li'), document.getElementById('bigpic'));
</script>
</body>
</html>
li[i].onclick=function(){document.getElementById('bigpic').src=this.src;}
or
li[i].onclick=function(){document.getElementById('bigpic').src=li[i].src;}
??wan
window.onload=function(){
        var li=document.getElementById('smallpic').getElementsByTagName('img');

         for(var i=0;i<li.length;i++)
          {
        li[i].index = i;
          li[i].onclick=function(){document.getElementById('bigpic').src=li[this.index].src;}
          }
        };
<div id="showimg" style="overflow:hidden;text-align:center;position:absolute;background:#fff;width:700px;height:550px;z-index:1001;">
      <div id='smallpic' style="overflow:auto;margin-left:20px;width:150px;height:500px;background:#D2EDF6;float:left;display:inline;">
         <ul style="list-style:none;">
          <li><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif" style="width:90px;height:90px;"></img></li>
              <li><img src="http://avatar.profile.csdn.net/A/6/4/2_falizixun2.jpg" style="width:90px;height:90px;"></img></li>
          <li><img src="http://avatar.profile.csdn.net/5/2/6/2_zhongxingxuan.jpg" style="width:90px;height:90px;"></img></li>
          <li><img src="http://avatar.profile.csdn.net/D/E/8/2_thc1987.jpg" style="width:90px;height:90px;"></img></li>
          <li><img src="http://avatar.profile.csdn.net/7/D/2/2_danica7773.jpg" style="width:90px;height:90px;"></img></li>
         </ul>
      </div>
      <img id='bigpic' style="float:right;width:500px;heigth:500px;margin-right:20px;"src=""></img>
    </div>
    <script>
    window.onload=function(){
        var li=document.getElementById('smallpic').getElementsByTagName('img');
        //var that;
         for(var i=0;i<li.length;i++)
          {
          //alert(that.src);
          li[i].onclick=function(){
                  // 这里用this.src
                  // 那个that真没必要.
  document.getElementById('bigpic').src=this.src;
  }
          }
        };
    </script>