Ticker horizontal à défilement continu contenant des images dans jQuery?

Question

Je voudrais faire quelque chose comme ceci: http://javascript.about.com/library/blcmarquee1.htm

Le script dont j'ai parlé semble toutefois être un peu laggy (obsolète?), Donc je me demandais si quelqu'un connaissait une meilleure solution. (. Solutions jQuery bienvenue)

Answer 1

Je viens de trouver cela - axée sur jQuery, et a des images. J'ai l'intention de l'utiliser pour un projet en cours.

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

MISE À JOUR: Je suis maintenant utilisé dans votre code de production. Le plugin est capable de boucler 70+ 150 × 65px images en douceur - dont un certain nombre d'un autre plugin que j'ai essayé similaire à cela échouaient.

NOTE il a empesté le ravage avec z-index questions dans IE 6/7 et ne se présentait pas etc. - Mais cela pourrait aussi avoir été en partie dû à mon CSS. Pour toute personne ayant des problèmes avec elle ne se présente pas du tout dans IE vérifier la norme IE z-index fixe: http://www.google.com/search?q=ie+z+index+issues

Mise à jour: choses Addition à considérer lors de la mise en œuvre des plug-ins comme ceux-ci:

• Le nombre des éléments et du type de contenu à faire défiler. J'ai trouvé un numéro qui commencerait à pépiller dès que vous auriez plus de 15 images à faire défiler.
• Je trouve un certain nombre de ces plug-ins qui ont été liés à d'anciennes versions de jquery
• Si des images de défilement ILS SONT TOUS LES MÊME TAILLE à nouveau un certain nombre de plug-ins avec seulement d'expériences diverses ont travaillé si toutes les images sont les mêmes taille, mais n'a pas fait cela clairement dans les tutoriels. Je crois alors que les plugins s'exécutent puis définissent une chaîne de tags li qui sont tous x larges puis calculent la distance totale de tous les enchaînés ensemble pour gérer le défilement.
• Effets - certains en continu défiler les autres se déplacerait une image pause pour une seconde, puis déplacer une autre image

je maintenant trouvé ces deux plugins changeurs d'être très bon aussi bien.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

The Silky-Smooth jQuery Marquee et Giva Labs' Marquee

Answer 3

Juste une pensée. Pourriez-vous faire quelque chose comme ça.

<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> 

et le code html

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