JavaScript Zu einem Anker innerhalb einer Liste springen

[sverebom]

Situation: Ich bastele ein kleines automatisches Karussel. Dafür verwende ich eine einfache Liste, die sechs mal breiter ist als als ein einzelnes Listen-Element:

<ul id="carouselContent" class="carousel">
    <li id="carouselItem_1"><a title="Carousel Dummy 1"><img src="style/carousel_1.jpg" width="736" height="245" alt="Carousel Dummy 1" /></a></li>
    <li id="carouselItem_2"><a title="Carousel Dummy 2"><img src="style/carousel_2.jpg" width="736" height="245" alt="Carousel Dummy 2" /></a></li>
    <li id="carouselItem_3"><a title="Carousel Dummy 3"><img src="style/carousel_3.jpg" width="736" height="245" alt="Carousel Dummy 3" /></a></li>					
    <li id="carouselItem_4"><a title="Carousel Dummy 4"><img src="style/carousel_4.jpg" width="736" height="245" alt="Carousel Dummy 4" /></a></li>
    <li id="carouselItem_5"><a title="Carousel Dummy 5"><img src="style/carousel_5.jpg" width="736" height="245" alt="Carousel Dummy 5" /></a></li>
</ul>

Mit jquery/JavaScript verschiebe ich die Liste einfach nach einem gewissen Intervall um die Breite eines Listen-Elements nach links. Um eine nahtlose Wiederholung zu erreichen, wird das erste Listen-Element dupliziert und am Ende der Liste als sechstes Listen-Element eingefügt.

Die Idee und das Problem: Wenn die Animation beim letzten Listen-Element angekommen ist, dass ja ein Duplikat des ersten Listen-Elements ist, soll die Animation einfach wieder an den Anfang der Liste springen und erneut durch die Liste laufen, und das ohne Animation, so dass der Eindruck entsteht, das Karussel würde endlos rotieren.

Wie kriege ich es nun hin, dass die Liste einfach wieder an den Anfang springt? Es muss doch möglich sein, innerhalb eines DOM-Elements zu einem Anker zu springen.

	function rotate() {

		$('#carouselContent li:first').clone().appendTo('#carouselContent');
	
		setInterval( function(carouselIndex) {
			
			target = '-' + global.carouselIndex + '00%';
		
			if ( global.carouselIndex == 5 ) {		
				$('#carouselContent').animate({ left: target });

                                // Hier irgendwo soll die Liste wieder an den Anfang springen!

				global.carouselIndex = 0;
			} else {
				$('#carouselContent').animate({ left: target });
				global.carouselIndex++;
			};
		}, 1000);
	};

Mein Lösungansatz treibt mit Sicherheit dem einen oder anderen Tränen in die Auge, aber mir reicht diese Lösung für den Anfang. Ich werde mich schon noch weiter damit auseinander setzen, aber jetzt fehlt mir die Zeit, etwas ganz Neues anzufangen. Es funktioniert ja auch soweit, nur der Sprung an den Anfang der Liste fehlt mir noch.

 

[Daaron]

Der beste Tip ist immer: Erfinde das Rad nicht neu. Ich kann dir nur http://dev7studios.com/plugins/caroufredsel/ ans Herz legen. Viel zu geil und flexibel, um es nicht zu nutzen.

 

[sverebom]

Warum sagst du mir nicht einfach, dass ich die Dauer der Animation nur auf "0" setzen muss, damit jquery wieder an den Anfang der Liste springt? Jetzt hätte ich deinetwegen beinahe dieses Plugin installiert. Mensch Daaron, du lässt nach!

Karussel steht und macht was es soll! Danke!

function rotate() {

	$('#carouselContent li:first').clone().appendTo('#carouselContent');
	
	setInterval( function(carouselIndex) {
			
		target = '-' + global.carouselIndex + '00%';
		
		if ( global.carouselIndex == 5 ) {		
			$('#carouselContent').animate({ left: target }, 800, function() {				

				$('#carouselContent').animate({ left: '0%' }, 0);				
				global.carouselIndex = 0;
			});
		} else {
			$('#carouselContent').animate({ left: target }, 800);
			global.carouselIndex++;
		};
	}, 1000);
};

 

[Daaron]

weil ich nicht viel davon halte, eigene lösungen zu basteln, die sehr strikt auf bestimmte zwecke ausgerichtet sind. außerdem bin ich durch meine Contao-Sucht eher ein Mootools-Mann, ich fussel mich jetzt erst in jQuery rein.

Samma, könnte man diesen String-Aufbau mit global.carouselIndex + '00%'; nicht auch irgendwie mathematisch ausdrücken? Das sieht so komisch aus... Da muss doch was in Form von -x*100 gehen...

 

[sverebom]

Ich habe nur eine kleine, statische Dummy-Seite gebaut, die Startseite eines Shops mit einem Carousel. Sollte daraus etwas Größeres werden, werde ich mir eine professionellere Lösung suchen, die mit einem CMS zusammenarbeiten kann, denn an der Stelle bin ich durchaus bei dir: Warim etwas Neues bauen, wenn es bessere und erprobtere Lösungen gibt? Gleichwohl halte ich aber auch nichts davon, ein fettes, mit Features überladenes Plugin zu installieren, um einen kleinen Effekt zu erzielen. So etwas entscheide ich von Fall zu Fall.

Die Lösung, die ich jetzt habe, kommt mit zwei Dutzend Code-Zeilen aus, Navigation inklusive. Und diese Lösung macht genau das, was ich will. Zudem lerne ich dabei ja auch etwas, von daher war es hier okay, mein eigenes kleines Carousel zu schreiben (und ich werde bestimmt weiter daran arbeiten und versuchen zu optimieren, um zu lernen).