ticker horizontal con desplazamiento continuo que contiene imágenes en jQuery?

Question

me gustaría hacer algo como esto: http://javascript.about.com/library/blcmarquee1.htm

El guión me referí sin embargo parece que hay un poco de lag (obsoleto?), Así que me preguntaba si alguien sabía de una solución mejor. (. Soluciones jQuery bienvenida)

Answer 1

Acabo de encontrar este - impulsado por jQuery, y tiene imágenes. Tengo la intención de usarlo para un proyecto actual.

http://logicbox.net/jquery/simplyscroll/

ACTUALIZACIÓN: He utilizado ahora esta en el código de producción. El plugin es capaz de reproducir 70+ 150 × 65px imágenes con bastante fluidez, lo cual fue una falla de otro plugin que probé de esta manera.

NOTA que apestaba a problemas con z-index en IE 6/7 y no aparecía, etc. - Pero esto también podría deberse en parte a mi CSS. Para cualquier persona que tenga problemas con él que no aparecen en absoluto en el IE echa un vistazo a los estándar IE z-index correcciones: http://www.google.com/search?q=ie+z+index+issues

ÚLTIMA ACTUALIZACIÓN: adición cosas a tener en cuenta en la aplicación de los plug-ins como estos:

• El número de elementos y tipo de contenido para desplazarse. Encontré un número que comenzaría a fallar tan pronto como tuviera más de 15 imágenes para desplazarse.
• He encontrado varios de estos plugins que estaban atados a las viejas versiones de jQuery
• Si imágenes que se desplazan son todos del mismo tamaño nuevo un número de los plugins que experimentó con sólo funcionaba si todas las imágenes fueron los mismos tamaño pero no dejó esto en claro en los tutoriales. Creo que los plugins se ejecutarán y luego establecerán una cadena de etiquetas li que son todas x ancho y luego calcularán la distancia total de todas ellas encadenadas para administrar el desplazamiento.
• Efectos - algunos se desplazará continuamente otros se moverán una pausa de imagen para un segundo luego pasar otra imagen

ahora también he encontrado estos dos plugins rueda de desplazamiento para ser muy bueno también.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

The Silky-Smooth jQuery Marquee y Giva Labs' Marquee

Answer 3

Es sólo una idea. ¿Podrías hacer algo como esto?

<style type="text/css"> 

.imgwindow{ 
width:500px; //or whatever 
height:65px; //or whatever 
position:relative; 
overflow:hidden; 
} 

.imgholder{ 
min-width:2000px; 
height:65px; 
position:absolute; 
left:-200px; 
} 

.inline-image{ 
display:inline-block; 
} 

</style> 

<script type="text/javascript"> 

var img; 

function imgScroll(){ 
img = $(".inline-image").first(); 
img.animate({width:0},2500,'linear',function(){ 
    img.remove(); 
    $(".imgholder").append(img); 
    imgScroll(); 
}); 

} 

$(document).ready(function(){ 

imgScroll(); 

}); 

</script> 

y el html

<div class="imgwindow"> 
    <div class="imgholder"> 
    <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />... 
    </div> 
</div>