javascript - mover - scroll right jquery
¿Desplazar continuamente el ticker horizontal que contiene imágenes en jQuery? (3)
Acabo de encontrar esto: impulsado por jQuery, y tiene imágenes. Tengo la intención de usarlo para un proyecto actual.
http://logicbox.net/jquery/simplyscroll/
ACTUALIZACIÓN: Ahora he usado esto en el código de producción. El complemento es capaz de hacer un bucle de 70+ imágenes de 150 × 65px sin problemas, en el que varios de los complementos que probé de forma similar estaban fallando.
NOTA, apestó 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 esto, no se muestra en absoluto en IE, compruebe las correcciones estándar z-index IE: http://www.google.com/search?q=ie+z+index+issues
ÚLTIMA ACTUALIZACIÓN: agregue cosas a considerar al implementar complementos como estos:
- El número de elementos y el tipo de contenido para desplazarse. Encontré un número que comenzaría a fallar tan pronto como tuvieras más de 15 imágenes para desplazarte.
- Encontré algunos de estos complementos que estaban vinculados a versiones antiguas de jQuery
- Si las imágenes en desplazamiento SON DE TODO EL MISMO TAMAÑO otra vez, algunos de los complementos con los que experimenté solo funcionaron si todas las imágenes tenían el mismo tamaño pero no lo aclararon en los tutoriales. Creo que luego los complementos se ejecutan y luego establecen una cadena de etiquetas li que son todas de ancho x luego calculan la distancia total de todas ellas encadenadas para administrar el desplazamiento.
- Efectos: algunos se desplazarían continuamente, otros moverían una pausa de imagen por un segundo y luego moverían otra imagen
Ahora también he encontrado que estos dos plugins de desplazamiento también son muy buenos.
Me gustaría hacer algo como esto: http://javascript.about.com/library/blcmarquee1.htm
Sin embargo, el guión al que hice referencia parece estar un poco rezagado (¿obsoleto?), Así que me preguntaba si alguien sabía de una mejor solución. (Se aceptan soluciones de jQuery.)
Solo un pensamiento. ¿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>