défilement en continu ticker horizontal contenant des images en 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 sont les bienvenus.)

Answer 1

Je viens de trouver cela -, entraîné jQuery, et a des images. Je 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 plug-in est capable de boucle 70+ 150 × 65px images assez facilement -. Laquelle un certain nombre d'un autre plug-in que j'ai essayé semblable à ce défaut sur étaient

NOTE il empestait des ravages avec des problèmes de z-index dans IE 6/7 et n'apparaissait pas, etc. - Mais cela aurait aussi pu être en partie à cause de mon CSS. Pour toute personne ayant des problèmes avec elle ne se présente pas du tout dans IE vérifier les z-index standards IE fixe: http://www.google.com/search?q=ie+z+index+issues

Mise à jour: les choses d'addition à prendre en compte lors de la mise en œuvre des plug-ins comme ceux-ci:

• Le nombre d'éléments et le type de contenu pour faire défiler. J'ai trouvé un nombre qui commencerait à pépin dès que vous avez eu plus de dire 15 images pour faire défiler.
• J'ai trouvé 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 de travail que si toutes les images étaient de la même taille, mais ne faisaient pas clairement dans les tutoriels. Je crois alors les plug-ins sont alors exécutés par définir une chaîne de balises li qui sont tous les x large calculent ensuite la distance totale de tous enchaînés ensemble pour gérer le défilement.
• Effets - certains défilent en permanence d'autres se déplaçaient d'une pause d'image pour une seconde puis passer une autre image

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

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

Le Chapiteau jQuery-lisse Silky et Chapiteau GIVA Labs

Answer 3

Juste une pensée. Pouvez-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>