0

これは以前に説明したトピックでなければならないことはわかっていますが、私が新しく、まだ JavaScript を学習中であることを考えると、見つけたすべての答えは少し複雑でした。

HTMLのヘッドセクションに次のコードがあります

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

したがって、ボタンはさまざまな位置を切り替え、スクリプトは時間間隔で位置を循環します

今私が達成しようとしているのは、位置が循環しているときに、ボタンの1つをクリックすると、関連する位置にジャンプし、しばらくの間（数秒間）その状態を維持してから続行することですループ。

私の動機を理解しやすくしたことを願っています。

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

それほど多くのコードは必要ありません：自分自身を何度も呼び出すdisplayResult関数を1つ作成するだけです：

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 に答える
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 関数を ba IIFE (Immediately Invoked Function Expression) に変更しましたが、必要ではありません。呼び出される必要があるため、実行する必要はありませんonload。

于 2013-01-10T09:44:32.690 に答える