Question

好的，我知道这必须是前面讨论过的话题，但是我发现的所有答案都有点复杂，因为我是新手并且仍然在学习javascript。

我的html

的head部分中有以下代码

<script>
function timedText() {
    setTimeout(function(){displayResult()},3000);
    setTimeout(function(){displayResult1()},7000);
    setTimeout(function(){displayResult2()},15000);
    setTimeout(function(){timedText()},18000);
}
</script>

<script>
function change() {
    setTimeout(function(){timedText()},1000);
}   
</script>

<script>
function displayResult() {
    document.getElementById("adimg_holder").style.bottom="0px";
    document.getElementById("button1").style.backgroundPosition="bottom";
    document.getElementById("button2").style.backgroundPosition="top";
    document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult1() {
    document.getElementById("adimg_holder").style.bottom="370px";
    document.getElementById("button1").style.backgroundPosition="top";
    document.getElementById("button2").style.backgroundPosition="bottom";
    document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult2() {
    document.getElementById("adimg_holder").style.bottom="739px";
    document.getElementById("button1").style.backgroundPosition="top";
    document.getElementById("button2").style.backgroundPosition="top";
    document.getElementById("button3").style.backgroundPosition="bottom";
}
</script>

以及以下html

    <body onload="change()">
    <div class="banner_area">
    <div class="banner_wrapper">
        <img src="images/image_holder.png" />
        <div id="ad_holder">
            <div id="adimg_holder">
            <img class="ad_images" src="images/recruitment_banners.png" />
            <img class="ad_images" src="images/training_banners.png" />
            <img class="ad_images" src="images/staffing_banner.png" />
            </div>
        </div>
        <div id="ad_buttons">
        <div id="button1" style="background-image:url(images/buttonfirst.png);background-position:bottom;width:259px;height:41px" onclick="displayResult()"></div>
        <div id="button2" style="background-image:url(images/buttonsecond.png);width:259px;height:41px" onclick="displayResult1()"></div>
        <div id="button3" style="background-image:url(images/buttonthird.png);width:259px;height:41px" onclick="displayResult2()"></div>
    </div>
    </div>
    </div>

因此按钮切换不同的位置，脚本以时间间隔循环移动位置

现在我想要实现的是当位置循环时，如果我点击其中一个按钮，它会跳到相关位置并保持一段时间（比如说几秒钟）然后继续循环。

希望我的动机很容易理解。

Answer 1

您可以使用setTimeout计时功能本身。

将函数写为：

function calldesiredFunctionafterPause (functionTobeCalled){

   setTimeout(function(){functionTobeCalled,1000}) //increase the millisec as needed
}

并在onClick上调用此函数并将函数名称作为参数传递。

这将使onclick功能延迟所需的时间

Answer 2

以下是您如何实现此行为：http://jsfiddle.net/PcZsT/12/

这是JavaScript：

function timedText() {
  setTimeout(function() {
    displayResult();
  },2000);
  setTimeout(function() {
    displayResult1();
  },6000);
  setTimeout(function() {
    displayResult2();
  },14000);
  setTimeout(function() {
    timedText();
  },15000);
}

(function change() {
  setTimeout(function() {
    timedText();
  },1000);
}());

var locked = false;

function button1Handler() {
  moveTop();
  lockFor(3);
}

function button2Handler() {
  moveBottom();
  lockFor(3);
}

function lockFor(seconds) {
  locked = true;
  setTimeout(function () {
    locked = false;
  }, seconds * 1000);
}

function displayResult() {
  if (locked) return;
  moveTop();
}

function moveTop() {
  document.getElementById("adimg_holder").style.bottom="0px";
  document.getElementById("button1").style.backgroundPosition="bottom";
  document.getElementById("button2").style.backgroundPosition="top";
  document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult1() {
  if (locked) return;
  moveMiddle();
}

function moveMiddle() {
  document.getElementById("adimg_holder").style.bottom="370px";
  document.getElementById("button1").style.backgroundPosition="top";
  document.getElementById("button2").style.backgroundPosition="bottom";
  document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult2() {
  if (locked) return;
  moveBottom();
}

function moveBottom() {
  document.getElementById("adimg_holder").style.bottom="739px";
  document.getElementById("button1").style.backgroundPosition="top";
  document.getElementById("button2").style.backgroundPosition="top";
  document.getElementById("button3").style.backgroundPosition="bottom";
}

上述功能分别是button1和button2。

的点击处理程序

我还将change函数更改为бeIIFE（立即调用函数表达式），但没有必要，您不必这样做，因为您想要调用onload。< / p>

Answer 3

你不需要那么多代码：只需制作一个将一遍又一遍地调用自己的displayResult函数：

var scrollParam = {        scrollPos : 0,         // current pos
                           scrollIncr : 370,      // incr in px each call
                           loopScrollAfter : 700  // set scrollPos to >0 if above that number
                           delay : 3000,          // std scroll delay 
                           whichIsOnTop : 0,      // index of the topmost item (button)
                           pauseDelay : 1000,     // added delay if someone clicks
                           pauseRequired : 0 };   // current required click delay

var mainItem = document.getElementById("adimg_holder");

function displayResult()
 {
   mainItem.style.bottom=scrollParam.scrollPos +"px";
   scrollParam.scrollPos += scrollParam.scrollIncr;
   if (scrollParam.scrollPos>scrollParam.loopScrollAfter) scrollParam.scrollPos=0;

   setBackgroundPosition("button1",0);
   setBackgroundPosition("button2",1);
   setBackgroundPosition("button3",2);
   scrollParam.whichIsOnTop = (scrollParam.whichIsOnTop + 1) % 3;

   // now setup the next call, taking into account if a pause is required
   var requiredDelay = scrollParam.delay;
   if (scrollParam.pauseRequired >0) { 
            requiredDelay += scrollParam.pauseRequired;  
            scrollParam.pauseRequired=0;
           }
   setTimeout(displayResult, requiredDelay);
 }

 var setBackgroundPosition(itemName, index ) {             
    document.getElementById(itemName).style.backgroundPosition=topOrBottom(index ); 
  };

 // returns "top" for the right index (==scrollParam.whichIsOnTop) and "bottom" for the others
 var topOrBottom(thisIndex) { return (thisIndex == scrollParam.whichIsOnTop) ? "top" : "bottom"; };

 // in the button click handler you should use :
 scrollParam.pauseRequired += scrollParam.pauseDelay;

 // to launch the scroll, just call :
 displayResult();                        // in the loaded() event handler for example.

Rq：如果您愿意，可以轻松更改参数以使滚动更平滑。

单击暂停Javascript几秒钟

3 个答案: