Continuamente scrolling ticker orizzontale contenente le immagini in jQuery?

Question

Mi piacerebbe fare qualcosa di simile: http://javascript.about.com/library /blcmarquee1.htm

Lo script ho fatto riferimento tuttavia sembra essere un po 'lag (superata?), Quindi mi chiedevo se qualcuno sapesse di una soluzione migliore. (Soluzioni di jQuery benvenuti.)

Answer 1

Appena trovato questo - jQuery-driven, e ha le immagini. Io ho intenzione di usarlo per un progetto in corso.

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

UPDATE: Ora ho usato questo nel codice di produzione. Il plugin è in grado di loop 70 + 150 × 65px immagini abbastanza liscio -., Che un certo numero di un altro plugin ho cercato simile a questo erano in mancanza su

Si noti che puzzava il caos con problemi z-index in IE 6/7 e non stava mostrando up ecc - Ma questo potrebbe anche essere in parte dovuto al mio CSS. Per chiunque abbia problemi con esso non si presenta affatto in IE controllare le correzioni z-index standard di IE: http://www.google.com/search?q=ie+z+index+issues

ULTIMO AGGIORNAMENTO: cose Oltre a prendere in considerazione in sede di attuazione dei plug-in come questi:

• Il numero di elementi e tipo di contenuto da scorrere. Ho trovato un numero che potrebbe iniziare al glitch, non appena si aveva più di 15 immagini dicono per scorrere.
• Ho trovato un certo numero di questi plugin che sono stati legati a vecchie versioni di jQuery
• Se immagini di scrolling sono tutti più lo stesso TAGLIA una serie di plug-in ho sperimentato solo prestato, qualora tutte le immagini erano le stesse dimensioni, ma non ha fatto questa chiara nelle esercitazioni. Credo che poi i plugin corrono quindi impostare una serie di tag li che sono tutti x larghezza quindi calcolare la distanza totale di tutti incatenati insieme per gestire lo scorrimento.
• Effetti - alcuni sarebbero in continuo scorrere gli altri avrebbero spostare una pausa di immagini per un secondo quindi spostare un'altra immagine

Ora ho anche trovato questi due plugin scroller per essere molto buona.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

Il vellutato jQuery Marquee e GIVA Labs Marquee

Answer 3

Solo un pensiero. Potresti fare qualcosa di simile.

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

e il codice html

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