0

してください-jQueryはありません。

関数 1 では、画像が表示されます (CSS3 アニメーション)。

関数 2 は、このスライドの下部にあるキャプションを上にスライドします (CSS3 アニメーション)。

関数 3 は、キャプション (CSS3 アニメーション) を下にスライドします。

その後、プロセスを繰り返す必要があります。

私の質問: これらの関数を、すべての関数の間に遅延を入れて連続ループに入れる方法。

HTMLコード

<div id="slider">

        <!-- Sildes 
             img_noshow means opacity:0;display:none;
             img_show means opacity:1;
             an_movein means a fade in effect CSS3
        -->
        <img id="img_1" class='img_show' src="/images/c1.jpg" style='width:960px;'/>
        <img id="img_2" class='img_noshow' src="/images/c2.jpg" style='width:960px;'/>
        <img id="img_3" class='img_noshow' src="/images/c3.jpg" style='width:960px;'/>
        <img id="img_4" class='img_noshow' src="/images/c4.jpg" style='width:960px;'/>
        <div id="slider_caption">
        <p id="slider_p1" class="an_slideup"><a href="#one">This is the text going with the slide 1.</a></p>
        <p id="slider_p2" class="img_noshow"><a href="#one">This is the text going with the slide 2.</a></p>
        <p id="slider_p3" class="img_noshow"><a href="#one">This is the text going with the slide 3.</a></p>
        <p id="slider_p4" class="img_noshow"><a href="#one">This is the text going with the slide 4.</a></p>
        </div>
      </div>

JAVASCRIPT コード

slide = 1;//global
function nextMove(){
  slide++;
  if(slide > 4){
    slide = 1;
  }
  //img_noshow means opacity:0;display:none;
  //img_show means opacity:1;
  //an_movein means a fade in effect
  for(i=1;i<5;i++){

    document.getElementById('slider_p'+i).className = 'img_noshow';
    if(i != slide){
      document.getElementById('img_'+i).className = 'img_noshow';
    }
    else{
      document.getElementById('img_'+i).className = 'an_movein';
    }
  }
}


function nextMove2(){
  document.getElementById('slider_p'+slide).className = 'an_slideup';
}

function nextMove3(){
  document.getElementById('slider_p'+slide).className = 'an_slidedown';
}
4

2 に答える 2

0

最も文字通りの例：

setInterval(function() {
  nextMove();
  setTimeout(function() {
    nextMove2();
    setTimeout(nextMove3, 5000)
  }, 5000);
}, 15000);

したがって、15 秒ごとにループが開始されます。最初の関数を実行し、5 秒待ってから 2 番目を実行し、5 秒待ってから 3 番目を実行します (その後、最初の関数を再び 5 秒待ちます)。

于 2013-10-22T16:38:54.873 に答える