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

bing475879749 2010-07-07 10:51:03
不要被这么多代码吓着了，只有一句代码需要解决，在里面有注泽的那句。

麻烦耐性看下

<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");

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";

    n++

    if(n>alen-1) n=0;

    T=setTimeout("set_ppt("+n+")",5000);//问题就在这里

  }

  set_ppt(n);

  })(obj)

}

start(pic1);

start(pic2);

</script>
...全文
151 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
luojihaidao 2010-07-08
  • 打赏
  • 举报
 回复
吃了饭给改了下


<!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>
abiao5555 2010-07-08
  • 打赏
  • 举报
 回复
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里面浏览器要崩溃
luojihaidao 2010-07-08
  • 打赏
  • 举报
 回复
setTimeout 方法里的this是window
luojihaidao 2010-07-08
  • 打赏
  • 举报
 回复
问题出在setTimeout T=setTimeout("set_ppt(n)",1000); 它会去执行window.set_ppt()。当然你现在没有这方法，所以不行。
abiao5555 2010-07-08
  • 打赏
  • 举报
 回复
T=setTimeout("set_ppt("+n+")",5000);

setTimeout 是 window下的方法，这样写会试图调用名为set_ppt()的全局函数
abiao5555 2010-07-08
  • 打赏
  • 举报
 回复
3楼很久没出门了吧
root_lee 2010-07-08
  • 打赏
  • 举报
 回复
楼主的代码写得很不好阅读啊，经过下面的改造，可以用了.
<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>
諾临風 2010-07-08
  • 打赏
  • 举报
 回复
我不是坏人，不过，我看到你是星星，偶不敢讲话了！
bing475879749 2010-07-07
  • 打赏
  • 举报
 回复
你们这些坏人，帮忙解决问题啊，大半夜的还在这等着解决问题咧
qingYun1029 2010-07-07
  • 打赏
  • 举报
 回复
楼主的头像真漂亮。。。
dengqiang02 2010-07-07
  • 打赏
  • 举报
 回复
解决JS闭包问题
function a(){
var abc="aaa";
document.body.onclick=b(abc);
}
function b(str){
return function (){
alert(str);
}
}
bing475879749 2010-07-07
  • 打赏
  • 举报
 回复
如果去掉闭包，注释的那句代码就起作用了，搞不明白
理解JavaScript中的闭包
本课程介绍什么是闭包，闭包有哪些使用场景，常见的使用错误。
ACM学习之路
一位高手对我的建议： 一般要做到50行以内的程序不用调试、100行以内的二分钟内调试成功.acm主要是考算法的 ，主要时间是花在思考算法上，不是花在写程序与debug上。 下面给个计划你练练： 第一阶段： 练经典常用算法，下面的每个算法给我打上十到二十遍，同时自己精简代码， 因为太常用，所以要练到写时不用想，10-15分钟内打完，甚至关掉显示器都可以把程序打 出来.
ACM学习计划
ACM学习建议 一位高手对我的建议： 一般要做到50行以内的程序不用调试、100行以内的二分钟内调试成功.acm主要是考算法的 ，主要时间是花在思考算法上，不是花在写程序与debug上。 下面给个计划你练练： 第一阶段： 练经典常用算法，下面的每个算法给我打上十到二十遍，同时自己精简代码， 因为太常用，所以要练到写时不用想，10-15分钟内打完，甚至关掉显示器都可...
大佬的建议
一位高手对我的建议： 一般要做到50行以内的程序不用调试、100行以内的二分钟内调试成功.acm主要是考算法的 ，主要时间是花在思考算法上，不是花在写程序与debug上。 下面给个计划你练练： 第一阶段： 练经典常用算法，下面的每个算法给我打上十到二十遍，同时自己精简代码， 因为太常用，所以要练到写时不用想，10-15分钟内打完，甚至关掉显示器都可以把程序打 出来. 1.最短路(Floyd、Dij...
ACM大量习题题库
ACM大量习题题库 ACM大量习题题库 现在网上有许多题库，大多是可以在线评测，所以叫做Online Judge。除了USACO是为IOI准备外，其余几乎全部是大学的ACM竞赛题库。 USACO http://ace.delos.com/usacogate 美国著名在线题库，专门为信息学竞赛选手准备 TJU http://acm.tongji.edu.cn/ 同济大学在线题...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章