Continuamente desplazamiento ticker horizontal 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. (JQuery soluciones dan la bienvenida.)

Answer 1

Sólo encontrado este - jQuery-impulsado, y tiene imágenes. Estoy con 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 bucle 70 + 150 × 65px imágenes bastante bien -. El cual un número de otro plugin Probé similar a esto fuera en su defecto

Tenga en cuenta que apestaba estragos en cuestiones z-index en IE 6/7 y no estaba apareciendo etc. - Pero esto también podría haber sido en parte debido a mi CSS. Para cualquier persona que tenga problemas con él que no aparecen en absoluto en el IE echa un vistazo a las correcciones de z-index estándar, es decir: http://www.google.com/search?q=ie+z+index+issues

ÚLTIMA ACTUALIZACIÓN: cosas además de tener en cuenta al implementar plug-ins como los siguientes:

• El número de elementos y el tipo de contenido para desplazarse. Me encontré con un número que comenzaría a glitch tan pronto como tuvo más de 15 imágenes dicen 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 plug-ins que experimentó con sólo funcionaba si todas las imágenes eran del mismo tamaño, pero no hacen esto claro en los tutoriales. Creo que entonces los plugins corren a continuación, establecen una serie de etiquetas li que son todos de ancho x continuación, calcular la distancia total de todos ellos encadenados juntos para gestionar el desplazamiento.
• Efectos - algunos se desplazará continuamente los demás se moverían una pausa de imagen para un segundo luego pasar otra imagen

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

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

El sedosa jQuery Carpa y GIVA Labs marquesina

Answer 3

Es sólo una idea. ¿Podría 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>