Scroll con paradas

[Alexis88]

Si lo que buscas hacer es algo como esto: http://jsbin.com/qugad/1

Puedes hacerlo así. En el documento HTML, tendremos una sección de Id "noticias", la cual contendrá 6 imágenes, todas ellas con la clase "noti".

Código HTML:

<section id = "noticias">
    <img src = "noticia1.jpg" class = "noti" />
    <img src = "noticia2.jpg" class = "noti" />
    <img src = "noticia3.jpg" class = "noti" />
    <img src = "noticia4.jpg" class = "noti" />
    <img src = "noticia5.jpg" class = "noti" />
    <img src = "noticia6.jpg" class = "noti" />
</section>
 

Luego, le damos un poco de estilo a la sección y movemos todas las imágenes hacia la izquierda, lo más alejado posible como para que no se vean. Los estilos que aplico a la sección son irrelevantes (para el funcionamiento del rotador de noticias), lo importante está en los estilos aplicados a las imágenes, que en este caso se agrupan en la clase "noti".

Código CSS:

#noticias{
    width: 40em;
    height: 10em;
    position: absolute;
    margin: -6em 0 0 -25em;
    top: 50%;
    left: 50%;
    border: .1em #002 solid;
    padding: 2em 0 0 8em;
}
 
.noti{
    display: inline-block; /* Las coloco en fila */
    width: 15em;
    height: 8em;
    position: absolute; /* Con esto evito que se superpongan una con otra */
    left: -50em; /* Aquí es en donde alejo las imágenes hacia la izquierda */
}
 

Y finalmente, aplicamos un poco de JavaScript con métodos de su librería jQuery para darle mayor dinamismo, aunque también podrías hacerlo con JavaScript nativo.

Código Javascript:

var noticias = $(".noti"),
    total = noticias.length,
    cont = 0;
 
$(noticias).eq(cont).css("position", "relative").animate({left: "+=50em"}, "fast");
$(noticias).eq(cont + 1).css("position", "relative").animate({left: "+=50em"}, "fast");
 
var slider = {
    show: function(){
        $(noticias).eq(cont).css("position", "absolute").animate({left: "-=50em"}, "fast");
        $(noticias).eq(cont + 1).css("position", "absolute").animate({left: "-=50em"}, "fast");
        
        cont = cont + 2 == total ? 0 : cont + 2;
      
        $(noticias).eq(cont).css("position", "relative").animate({left: "+=50em"}, "fast");
        $(noticias).eq(cont + 1).css("position", "relative").animate({left: "+=50em"}, "fast");
    }
};
 
setInterval(slider.show, 5000);
 

Lo que hago es lo siguiente; primero, declaro a la variable "noticias", la cual será un array con todas las imágenes que tengas la clase "noti", seguidamente, calculamos la cantidad de imágenes y la asignamos a la variable "total", finalmente, declaramos un contador que iniciará en cero. Luego de eso, aplicamos una posición relativa a los dos primeros elementos del array "noticias" que vienen siendo las dos primeras imágenes y enseguida, las alejamos 50em de la izquierda, con lo que retoman su ubicación original. Para darle el efecto de desplazamiento, utilizo el método animate de jQuery.

Lo anterior corresponde a lo que ocurrirá cuando accedamos a la página, pero después, necesitamos rotar las imágenes actuales por las siguientes y así sucesivamente en un bucle infinito, para esto declaro a la variable "slider" que contendrá un objeto literal; en dicho objeto, declaro el método "show", en el que realizaremos exactamente la acción contraria que hicimos al inicio con los dos primeros elementos del array "noticias", es decir, los desplazamos 50em hacia la izquierda, luego, aumentaremos el valor del contador, para lo cual debemos verificar si al aumentarlo no sobrepasa a la cantidad de imágenes existentes; como estamos mostrando las imágenes de dos en dos, tenemos que hacer la suma de igual forma, si sumándole 2 al valor actual del contador obtenemos la misma cantidad de imágenes, quiere decir que hemos llegado al límite, por lo que el valor del contador vuelve a ser cero para iniciar el rotador desde las dos primeras imágenes, caso contrario, aumentamos su valor en dos.

Ya con el valor del contador actualizado, procedemos a movilizar hacia la izquierda a las dos imágenes que continúan en el array "noticias", si el valor del contador es cero, mostrarás las dos primeras, sino, las que sigan. Todo esto se repetirá cada 5 segundos o 5000 milisegundos, que es el tiempo que asigno en el segundo parámetro del método setInterval, con el cual controlo la ejecución del método "show" del objeto "slider".

Saludos