Kontinuierlich scrollen horizontaler Ticker mit Bildern in jQuery?

Question

Ich würde gerne so etwas tun: http://javascript.about.com/library/blcmarquee1.htm

Das Skript, auf das ich mich jedoch bezog, scheint jedoch etwas verzögert zu sein (veraltet?), Deshalb fragte ich mich, ob jemand eine bessere Lösung wusste. (JQuery Solutions Willkommen.)

Answer 1

Ich habe das gerade gefunden-jQuery-betrieben und hat Bilder. Ich beabsichtige, es für ein aktuelles Projekt zu verwenden.

http://logicbox.net/jquery/simplyScroll/

UPDATE: Ich habe dies jetzt im Produktionscode verwendet. Das Plugin ist in der Lage, 70+ 150 × 65px -Bilder ziemlich reibungslos zu schleifen - was eine Reihe eines anderen Plugins, das ich ähnlich war, versuchte.

Beachten z-index Probleme in IE 6/7 und erschien nicht usw. - aber dies könnte auch teilweise auf mein CSS zurückzuführen sein. Für alle, die Probleme damit haben, dass es überhaupt nicht in IE auftaucht, schau dir den Standard -IE an z-index Korrekturen: http://www.google.com/search?q=ie+Z+Index+Issues

Neueste Update: Additionszeiten, die bei der Implementierung von Plug-Ins wie folgt zu berücksichtigen sind:

• Die Anzahl der Elemente und Art des Inhalts zum Scrollen. Ich fand eine Nummer, die anfangen würde, zu fällen, sobald Sie mehr als 15 Bilder zum Scrollen hatten.
• Ich fand einige dieser Plugins, die an alte Versionen von JQuery gebunden waren
• Wenn Scrollenbilder wieder die gleiche Größe sind, wurden einige der Plug-Ins, mit denen ich nur gearbeitet habe, wenn alle Bilder die gleiche Größe hatten, dies jedoch in den Tutorials nicht klar machte. Ich glaube, dann läuft der Plugins dann eine Reihe von Li -Tags, die alle x breit sind und dann die Gesamtentfernung von allen zusammengekettet sind, um das Scrollen zu verwalten.
• Effekte - Einige würden kontinuierlich scrollen, andere würden eine Bildpause für eine Sekunde bewegen und dann ein anderes Bild verschieben

Ich habe jetzt auch festgestellt, dass diese beiden Scroller -Plugins auch sehr gut sind.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

Das seidgeflüchtete JQuery-Festzelt und GIVA LABS -Festzelt

Answer 3

Nur ein Gedanke. Könntest du so etwas tun?

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

und die HTML

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