做一個循環的JavaScript幻燈片沒有jQuery的

Possible Duplicate:
trying to create simple Slide show method in Javascript 做一個循環的JavaScript幻燈片沒有jQuery的

我必須學會讓傳送帶圖像幻燈片腳本使用JavaScript。我認爲最好從基礎知識中學習，而不是從框架中做出一些東西（即時腳本），但我是一個新手。我用我的技術寫這個腳本，但我認爲這很糟糕。

OK，這裏是我的問題：我不知道如何使這個幻燈片循環，任何人都可以幫我嗎？感謝

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #wrapper { 
     width:400px; 
     height:140px; 
     position:absolute; 
     left:50%; 
     top:50%; 
     margin: -70px 0 0 -200px; 
     background: #383838; 
     overflow: hidden; 
     } 

     #abc-container { 
     position: absolute; 
     width:1200px; 
     height:140px; 
     } 

     #a { 
     width:400px; 
     height:140px; 
     background: #FF0000; 
     float: left; 
     } 

     #b { 
     width:400px; 
     height:140px; 
     background: #FFFF00; 
     float: left; 
     } 

     #c { 
     width:400px; 
     height:140px; 
     background: #00FFFF; 
     float: left;  
     } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="abc-container"> 
      <div id="a"></div> 
      <div id="b"></div> 
      <div id="c"></div> 
     </div> 
    </div> 
    <div id="asas"></div> 
    <div id="asass"></div> 
    <script type="text/javascript"> 
     var runCarousel, runTimer; 
     firstval = 0; 
     secondval = 0; 

     function Carousel(){ 
     firstval += 10; 
     document.getElementById('abc-container').style.left = "-" + firstval + "px"; 
     document.getElementById('asas').innerHTML = "-" + firstval; 
      if(firstval == 400) 
      { 
       StopRun(); 
       StartTimer() 
       return; 
      } 
      if(firstval == 800) 
      { 
       StopRun(); 
       StartTimer() 
       return; 
      } 
     runCarousel = setTimeout(Carousel, 10); 
     } 

     function StartTimer(){ 
     secondval += 1; 
     document.getElementById('asass').innerHTML = "-" + secondval; 
     if(secondval == 10) 
     { 
      StopTimer(); 
      Carousel(); 
      return; 
     } 
     if(secondval == 20) 
     { 
      StopTimer(); 
      Carousel(); 
      return; 
     } 
     runTimer = setTimeout(StartTimer, 1000); 
     } 

     function StopRun(){ 
     window.clearTimeout(runCarousel); 
     } 

     function StopTimer(){ 
     window.clearTimeout(runTimer); 
     } 

     function firstStart(){ 
      setTimeout("Carousel()", 10000); 
     } 

     firstStart(); 
    </script> 
</body> 
</html>

來源

2012-10-01 user1697962

請考慮在發佈一個[JS小提琴演示（http://jsfiddle.net/），或類似的;這樣我們就可以看到發生了什麼。我們不必做出自己的演示：幫助*我們*幫助*您*。 –

首先有一個錯誤：

function firstStart(){ 
    setTimeout("Carousel()", 10000); 
}

正確：

function firstStart(){ 
    setTimeout(Carousel, 10000); 
}

到底

，所有設置被重置爲默認值，並開始計時：

在旋轉木馬：

if(firstval == 1200){ 
     document.getElementById('abc-container').style.left = "0" + "px"; 
     firstval = 0; 
     StopRun(); 
     StartTimer() 
     return; 
    }

與startTimer

if(secondval == 30) { 
     secondval = 0; 
     StopTimer(); 
     Carousel(); 
     return; 
    }

DEMO

Here is my example

來源

2012-10-01 09:43:50

感謝您的迴應:)。但是我希望這個循環看起來不順暢。第一部分（紅色）剛剛沒有動畫。 – user1697962

@ user1697962看看這個http://jsfiddle.net/M8GhH/2/ –

你好偉大的想法，使之循環這樣的，但我發現我的方式如何使它循環。感謝您的幫助，我建議:) – user1697962

做一個循環的JavaScript幻燈片沒有jQuery的

回答

相關問題