Hacer una presentación de diapositivas en bucle sin JavaScript jQuery

Possible Duplicate:
trying to create simple Slide show method in Javascript Hacer una presentación de diapositivas en bucle sin JavaScript jQuery

tengo aprender a realizar la escritura de diapositivas carrusel de imágenes con JavaScript. Creo que es mejor aprenderlo de lo básico que hacer algo del framework (script instantáneo) pero soy novato. Escribo este guión usando mi técnica, pero creo que es terrible.

OK, aquí está mi pregunta: No sé cómo hacer este ciclo de presentación de diapositivas, ¿alguien puede ayudarme? Gracias

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

Fuente

2012-10-01 user1697962

Por favor, considere la publicación de un [demo JS violín] (http://jsfiddle.net/), o similares; de esa manera podemos ver lo que está pasando. Y no tenemos que hacer nuestras propias demostraciones: ayúdennos * a ayudar * a usted *. –

En primer lugar hay un error:

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

correctamente:

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

al final, todos los ajustes se restablecen a los valores predeterminados e iniciar el temporizador:

en Carrusel:

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

en startTimer

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

DEMO

Here is my example

Fuente

2012-10-01 09:43:50

Gracias por su respuesta :). pero el lazo no se ve tan suave como deseo. La primera parte (roja) acaba de regresar sin animación. – user1697962

@ user1697962 mira este http://jsfiddle.net/M8GhH/2/ –

Hola, gran idea para hacer que funcione de esa manera, pero he encontrado la forma de hacerlo circular. Gracias por su ayuda, lo aconsejo :) – user1697962

Hacer una presentación de diapositivas en bucle sin JavaScript jQuery

Respuesta

Cuestiones relacionadas