haciendo un control deslizante de jQuery simple

Question

Estoy tratando de enseñarme a mí mismo javascript/jquery, así que me puse un proyecto para crear un control deslizante muy básico para mi sitio web. Al utilizar Codeacademy's y la jQuery API library, me familiaricé con el código pero tengo dificultades para familiarizarme con la sintaxis. Estoy, por lo tanto, viniendo aquí a buscar ayuda por medio de alguien que verifica mis esfuerzos.

Aquí está el código:

CSS:

#wrapper { width: 500px; height:300px; display: block; overflow: hidden; } 
#slider {width: 1500px; clear: both; margin-left:0;} 
.content {float: left; width: 500px; height: 300px; display: block; background:grey;} 

HTML:

<div id="wrapper"> 
    <div id="slider"> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
    </div> 
</div> 

<button id="left">left</button> 
<button id="right">right</button> 

y finalmente:

$#left.click(function { 
if ($('#slider').css('margin-left').between(0,-1500)) { 
    $('#slider').animate({ 
     margin-left : "+=500" 
    }, 500); 
}); 

} 
} 

que se traduce en mover el 1500px en todo el div que contiene la ima deja 500px cuando se hace clic en un botón. El control deslizante se encuentra dentro de un contenedor div que tiene un ancho de 500 píxeles y un desbordamiento oculto. La sentencia if es asegurarse de que el div no continúa viajando a la izquierda después de que se ha llegado al final del contenedor div

estoy totalmente agradecido a cualquiera que pueda ayudar con esta solicitud bastante egoísta

Answer 1

Aquí es su el código js con los errores de sintaxis señalados anteriormente así como un par de otros errores que impedían que tu código se ejecutara correctamente.

$('#left').click(function(){ 
    if ($('#slider').css('margin-left') <= '0px' && $('#slider').css('margin-left') >= '-1500px') {  
    $('#slider').animate({ 
      "margin-left" : "+=500" 
     }, 500); 
    }; 
}); 

Nota: He quitado la función .Entre() de su código ya que no pude encontrar ninguna documentación sobre este lugar. Si tiene la referencia a esta función, me encantaría verla. Por ahora, lo he reemplazado con una comparación de valor simple.

Aquí es una jsFiddle con su trabajo código:. http://jsfiddle.net/ghCX6/2/