for循环一加入计时器我就很伤脑筋

function play(){
  for(var i=0;i<4;i++){
    //moveImg函数里面有个setTimeout,大概耗时2秒
    (function(i) {
      moveImg(i);
    })(i);
  }
}包起来

可以这样写。  <div id="txt"></div>
  <script type="text/javascript">
function play(i){
  if(i>0){
moveImg(i);
setTimeout(function(){play(i-1)}, 2000);
  }
} function moveImg(i){
document.getElementById("txt").innerHTML = document.getElementById("txt").innerHTML + i + '<br>';
} play(4);
  </script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
p { position: relative; width: 50px; height: 50px; background: blue }
    </style>
    <title>Test</title>
</head><body>
<p>1</p>
<p>2</p>
<p>3</p><script type="text/javascript">
var ps = document.getElementsByTagName('p');
//调用示例
sequentailMove(2000, 400, ps);
/*-----按顺序向右移动一组页面元素-----------
t为移动单个对象所需时间
d为移动单个对象的距离
elems为要移动的一组页面元素
i参数不要传递，函数内部使用
*/
function sequentailMove(t, d, elems, i)
{
    var left = 1, m = elems.length, i = i || 0;
    if(i >= m) return;

    var tid = setInterval(function()
    {
        elems[i].style.left = left + 'px';
        left++;
        if(left > d)
        {
            clearInterval(tid);
            sequentailMove(t, d, elems, i + 1);
        }
    }, t / d);
}</script></body>
</html>

多谢xuzuning版主及各位同学的帮助，版主的写法好怪异，我试了还是不行，我把整个代码都贴出来吧<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="lotuslwt Inc.">
    <meta name="keywords" content="lotuslwt,china">
    <meta charset="utf-8">
    <title>Image move</title>    <style type="text/css">
      * {
        margin:0;
        padding:0;
      }      #imgBox {
        //border-style:solid;
        position:absolute;
        width:460px;
        height:270px;
        overflow:hidden;
      }      #imgCrt {
        position:absolute;
      }      #imgNxt {
        position:absolute;
      }      #pos {
        position:relative;
        width:460px;
        height:270px;
        margin:0 auto;
      }      #txtline {
        color:white;
        font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
        //text-align:center;
        padding-left:20px;
        width:100%;
        height:30px;
        line-height:30px;
        vertical-align:middle;
        background:black;
        position:absolute;
        top:240px;
        opacity:0.8;
      }    </style>
    <script type="text/javascript">
      var arrImg=["img/p1.jpg", "img/p2.jpg", "img/p3.jpg", "img/p4.jpg"];
      var arrTxt=[
      "this girs is my love, is she beautiful?",
      "What's your name, my women?",
      "I love you so much, do you love me?",
      "OMG, I am so sad listen to you say that."
      ];      window.onload=play;
      function id(name){
        return document.getElementById(name);
      }      function play(){
        //best way is use callback or hook i.e. invoke itself
        for(var i=0;i<4;i++){
          moveImg(i,true);
          //alert("next");
          //wait above orer finish
          //setTimeout("donothing(),2100*i);
        }
      }      function moveImg(crtid,dire){
        var imgC=id("imgCrt");
        var imgN=id("imgNxt");
        imgC.src=arrImg[crtid];
        if(dire){
          //move toward left i.e. forward
          imgN.src=arrImg[crtid+1];
          id("txtline").innerHTML=arrTxt[crtid];
          imgN.style.left=imgN.offsetLeft+460+"px";
          setTimeout(function(){
              for(var i=0;i<23;i++){
              setTimeout(function(){
                imgC.style.left=imgC.offsetLeft-20+"px";
                imgN.style.left=imgN.offsetLeft-20+"px";
                },50*i);
              }
              id("txtline").innerHTML=arrTxt[crtid+1];
              },2000);
        }
        else{
          //move toward right i.e. backward
          imgN.src=arrImg[crtid-1];
          id("txtline").innerHTML=arrTxt[crtid];
          imgN.style.left=imgN.offsetLeft-460+"px";
          setTimeout(function(){
              for(var i=0;i<23;i++){
              setTimeout(function(){
                imgC.style.left=imgC.offsetLeft+20+"px";
                imgN.style.left=imgN.offsetLeft+20+"px";
                },50*i);
              }
              id("txtline").innerHTML=arrTxt[crtid-1];
              },2000);
        }
      }

</script></head>
<body>
  <div id="pos">
    <div id="imgBox">
      <img id="imgCrt" src="img/p1.jpg">
      <img id="imgNxt" src="img/p1.jpg">
      <p id="txtline"></p>
    </div>
  </div>
</body>
</html>
下载点击http://pan.baidu.com/s/1o6K79Ia

下载点击
http://pan.baidu.com/s/1o6K79Ia

function play(){
var i=0;
(function(){
if(i>=4) return false;
moveImg(i,true);
i++;
setTimeout(arguments.callee, 2000)
})()
}

噗…這個簡單的問題怎麼弄那麼一大串...function play(){
  for(var i=0;i<4;i++){
    //moveImg函数里面有个setTimeout,大概耗时2秒
    moveImg.call(null , i);
  }
}行了

调试易

for循环一加入计时器我就很伤脑筋

解决方案 »