图片轮换用到闭包后不会自动播放，求高手

本帖最后由 bing475879749 于 2010-07-07 22:55:45 编辑

解决方案 »

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

解决JS闭包问题
function a(){
  var abc="aaa";
  document.body.onclick=b(abc);
}
function b(str){
  return function (){
   alert(str);
}
}
楼主的代码写得很不好阅读啊，经过下面的改造，可以用了.
<style>
.pic{ float:left; overflow:hidden;width:218px; height:212px; margin-left:8px; margin-top:30px;display:inline;font-size:12px; position:relative;border:1px solid #666666;}
.pic img{ width:218px; height:212px; display:none; border:none;}
.pic div{ position:absolute; bottom:0px; right:0; width:auto; height:18px;}
.pic div span{ width:20px; text-align:center; margin-right:3px; float:left; background:#999999; cursor:pointer;}
#pichover{ background:#0099FF; color:#FFF; font-weight:bold;}
</style>
<div class="pic" id="pic1">
<img src="http://images.enet.com.cn/2008/0109/12/8449206.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</div>
<div class="pic" id="pic2">
<img src="http://images.enet.com.cn/2008/0109/12/8449206.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</div>
<script type="text/javascript">
var pic1=document.getElementById("pic1");
var pic2=document.getElementById("pic2");
var n=0;
function start(obj,nn){(function(o){
  var span=o.getElementsByTagName("span");
  var img=o.getElementsByTagName("img");
  img[0].style.display="inline";
  var alen=img.length;
// var n=0;
  var T,T1;
  for(var i=0 ; i<alen ; i++){
    (function(m){
      span[m].onmouseover=function(){set_ppt(m);}
    })(i)
  }
  function set_ppt(n){
   // clearTimeout(T);
    for(i=0;i<alen;i++){
      span[i].id="";
      img[i].style.display="none";
    }
    span[n].id="pichover";
    img[n].style.display="inline";
//   T=setTimeout("set_ppt(n)",1000);//问题就在这里
  }
  function test()
  {
    clearTimeout(T);
set_ppt(n);
n++
    if(n>alen-1) n=0;
T=setTimeout(test,5000);
  }
  //set_ppt(n);
  test();
  })(obj)
}
start(pic1);
//start(pic2);
</script>
T=setTimeout("set_ppt("+n+")",5000);setTimeout 是 window下的方法，这样写会试图调用名为set_ppt()的全局函数
问题出在setTimeout  T=setTimeout("set_ppt(n)",1000); 它会去执行window.set_ppt()。当然你现在没有这方法，所以不行。
setTimeout 方法里的this是window
  function set_ppt(n){
   // clearTimeout(T);
    for(i=0;i<alen;i++){
      span[i].id="";
      img[i].style.display="none";
    }
    span[n].id="pichover";
    img[n].style.display="inline";
//   T=setTimeout("set_ppt(n)",1000);//问题就在这里

T=setTimeout("set_ppt(n)",1000);
放在set_ppt里面浏览器要崩溃
吃了饭给改了下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
.pic{ float:left; overflow:hidden;width:218px; height:212px; margin-left:8px; margin-top:30px;display:inline;font-size:12px; position:relative;border:1px solid #666666;}
.pic img{ width:218px; height:212px; display:none; border:none;}
.pic div{ position:absolute; bottom:0px; right:0; width:auto; height:18px;}
.pic div span{ width:20px; text-align:center; margin-right:3px; float:left; background:#999999; cursor:pointer;}
#pichover{ background:#0099FF; color:#FFF; font-weight:bold;}
</style>
</HEAD> <BODY>

<div class="pic" id="pic1">
<img src="http://images.enet.com.cn/2008/0109/12/8449206.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</div>
<div class="pic" id="pic2">
<img src="http://images.enet.com.cn/2008/0109/12/8449206.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<img src="http://www.240320.com/uploads/allimg/090625/213363925M-6.jpg" />
<img src="http://pic.usfang.com/gxtp/20080909/2008090909488850.jpg" />
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</div>
<script type="text/javascript">
var st = function(id,nn){
(function(id){
  var o = document.getElementById(id);
  var span=o.getElementsByTagName("span");
  var img=o.getElementsByTagName("img");
  img[0].style.display="inline";
  var alen=img.length;
  var n= (typeof(nn) == 'undefined' ? 0 : nn);
  var T,T1;
  for(var i=0 ; i<alen ; i++){
    (function(m){
      span[m].onmouseover=function(){set_ppt(m);}
    })(i)
  }
  function set_ppt(n){
    clearTimeout(T)
    for(i=0;i<alen;i++){
      span[i].id="";
      img[i].style.display="none";
    }
    span[n].id="pichover";
    img[n].style.display="inline";
    n++
    if(n>alen-1) n=0;
T=setTimeout("st('"+id+"',"+n+")",2000);
  }
  set_ppt(n);
  })(id)
}
st("pic1");
st("pic2");
//st.set_ppt(4);
//start(pic1);
//start(pic2);</script>
</BODY>
</HTML>