0

好的，我知道这必须是前面讨论过的主题，但是考虑到我是新手并且仍在学习 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>

所以按钮切换不同的位置，脚本以时间间隔在这些位置之间循环

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

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

4

3 回答 3

0

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

写一个函数为：

function calldesiredFunctionafterPause (functionTobeCalled){

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

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

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

于 2013-01-10T09:25:39.997 回答
0

以下是实现此行为的方法：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 函数更改为 бe IIFE（立即调用函数表达式），但这不是必需的，您不必这样做，因为您想被调用onload。

于 2013-01-10T09:44:32.690 回答
0

你不需要这么多代码：只需创建一个 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 ：如果您愿意，您可以轻松更改参数以获得更平滑的滚动。

于 2013-01-10T10:06:18.660 回答