title: Make a looping JavaScript Slideshow without jQuery
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/8263458/trying-to-create-simple-slide-show-method-in-javascript">trying to create simple Slide show method in Javascript</a>  </p>
  </blockquote>
  
  
  
  <p>I have learn to make carousel image slideshow script with JavaScript. I think it's better to learn it from the basic than we just make something from the framework (instant script) but I'm a newbie. I write this script using my technique, but I think it's terrible.</p>
  
  <p>OK, here is my question :
  I don't know how to make this slideshow loop, anyone can help me?
  Thanks</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          #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;    
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="abc-container"&gt;
              &lt;div id="a"&gt;&lt;/div&gt;
              &lt;div id="b"&gt;&lt;/div&gt;
              &lt;div id="c"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="asas"&gt;&lt;/div&gt;
      &lt;div id="asass"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          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();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>