web-dev-qa-db-fra.com

Téléscripteur horizontal à défilement continu contenant des images dans jQuery?

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

Le script auquel j'ai fait référence semble cependant un peu décalé (obsolète?), Donc je me demandais si quelqu'un connaissait une meilleure solution. (Les solutions jQuery sont les bienvenues.)

javascriptjquerymarqueescrollerticker
19
Mathias Bynens

Je viens de trouver ceci - jQuery-driven, et a des images. J'ai l'intention de l'utiliser pour un projet en cours.

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

MISE À JOUR: Je l'ai maintenant utilisé dans le code de production. Le plugin est capable de boucler 70+ 150 × 65px images assez facilement - sur lequel un certain nombre d'un autre plugin que j'ai essayé similaire à celui-ci échouait.

NOTEZ qu'il a fait des ravages avec z-index problèmes dans IE 6/7 et n'apparaissait pas, etc. - Mais cela pourrait également être dû en partie à mon CSS. À toute personne ayant des problèmes avec cela ne se présentant pas du tout dans = IE consultez la norme IE z-index correctifs: http://www.google.com/search?q=ie+z+index+issues

DERNIÈRE MISE À JOUR: Ajout d'éléments à considérer lors de l'implémentation de plug-ins comme ceux-ci:

  • Le nombre d'éléments et le type de contenu à faire défiler. J'ai trouvé un nombre qui commençait à glitch dès que vous aviez plus de 15 images à faire défiler.
  • J'ai trouvé un certain nombre de ces plugins liés aux anciennes versions de jquery
  • Si les images défilantes SONT À NOUVEAU DE LA MÊME TAILLE, un certain nombre de plug-ins que j'ai expérimentés ne fonctionnaient que si toutes les images étaient de la même taille, mais cela n'était pas clair dans les didacticiels. Je crois que les plugins s'exécutent puis définissent une chaîne de balises li qui sont toutes x larges, puis calculent la distance totale de tous les chaînés pour gérer le défilement.
  • Effets - certains défilent en continu, d'autres déplacent une pause d'image pendant une seconde puis déplacent une autre image

J'ai également trouvé que ces deux plugins de scroller étaient également très bons.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

33
megaSteve4

Le chapiteau jQuery Silky-Smooth et Chapiteau Giva Labs

7
Sampson

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 html

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