Problem mit Schleife bei der Realisierung eines Sliders

**NE555** · 16.05.2011, 13:37

Hi!

Ich hoffe ihr könnt mir helfen!

Ich arbeite an einem Slider, da es noch keinen passenden im Web gibt. Nivo-Slider kann nur Bilder hin und herschieben und der AnythingSlider passt auch nicht...

Da ich mich aber nicht so wirklich gut in JavaScript auskenne gibt es schon Probleme. Hier ist mein Testfile (oben und unten fehlt was, ich weiß...):

Code:

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){ 
			$('#slider div').hide(); // reset all slides
			var n = $("#slider div").length; // counting how many slides there are
			var zufall=Math.floor((Math.random()*n) + 1); // creating a random number
			var nextslide = showSpecific(zufall); // showing the first random slide
			
			animation(nextslide,n); // starting the animation
		});
		
		function animation(start,slides) {
			var i = start; // variable for counting (slide 1, slide 2, ...)
			while(1) {
				setTimeout("showSpecific(i)",2000); // waiting 2 seconds then --> showSpecific()
				if(i==slides) { // if last slide --> 
					i = 1; // back to beginning
				} else {
					i++; // next slide number
				}
			}
		}
		
		function showSpecific(slide) {
			$('#slider>ul>li').removeClass('active'); // reset all classes
			$('#slider div').fadeOut(); // reset all slides
			
			$('#slider div:nth-child('+slide+')').fadeIn('slow'); // show right slide
			// $('#slider div:nth-child('+slide+')').addClass('active'); // append class="active" to div
			$('#slider>ul>li:nth-child('+slide+')').addClass('active'); // -,- to li
			
			var x = slide + 1; // variable for the next slide
			return x; // return this value for later use
		}
	</script>
</head>
<body>
	<div id="box">
		<div id="slider">
			<div>
				<h3>First Test Slide</h3>
				<p>
					Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida.
				</p>
			</div>
			<div>
				<img src="picture.png">
			</div>
			<div>
				<ul>
					<li>In condimentum orci id</li>
					<li>Vivamus id mollis quam. Morbi ac commodo nulla. In</li>
					<li>Phasellus molestie magna non est bibendum non</li>
					<li>Nunc eu ullamcorper orci. Quisque</li>
					<li>Quisque lacus quam, egestas ac tincidunt a, lacinia vel</li>
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
					<li>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris</li>
				</ul>
			</div>
			<!--><div>
				<iframe width="400" height="200" src="http://www.youtube.com/embed/L9szn1QQfas?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>-->
			<ul>
				<li><a href="javascript:showSpecific(1)">1</a></li>
				<li><a href="javascript:showSpecific(2)">2</a></li>
				<li><a href="javascript:showSpecific(3)">3</a></li>
				<!--<li><a href="javascript:showSpecific(4)">4</a></li>-->
			</ul>
		</div>
	</div>

Leider hängt sich da aber der Browser auf. Darf man while(1) vielleicht nicht schreiben? Bzw. wie kann man dann eine Endlosschleife realisieren?

Das File ist außerdem zu finden unter: http://nicoeinsidler.bplaced.com/p/test-slider/.

Hoffe es kann mir wer helfen und meine Frage ist nicht zu blöd...

lg
nico

EDIT: Weil ich gesehen hab, dass der Code so unschön abgebildet wird:

Click for large view - Uploaded with Skitch

**drp** · 16.05.2011, 13:54

Statt der Schleife würde ich eine Funktion machen und diese dann automatisch mit setInterval("Funktion()", 1); jede Millisekunde aufrufen.

BTW: Deine MW-Homepage wird auf dem iPad/iPhone falsch angezeigt. Der Farbverlauf unten scrollt mit, da es für iPads und iPhones kein Position:fixed; gibt...

**das_micha** · 16.05.2011, 14:12

Auf den ersten Blick schmeiss mal das while raus. Das was du damit bauen willst macht setinterval
Mit deiner while schiesst du dir den Speicher zu. Weil das Script bei dem settimeout nicht anhält. Stattdessen werden dir ein paar tausend timeouts gestartet die aber erst nach 2 Sekunden anlaufen.

Schau dir mal über den firebug an wie die slider funktionieren. Die arbeiten eigentlich so, dass das erste Element nachdem es überblendet wird, an das Ende der elementliste geschoben wird. Dadurch arbeitet das Script theoretisch immer nur das erste Element ab.
Wenn du was anderes als Bilder sliden möchtest, dann schau dir mal jcarousel an. Wobei der basisumfang auch schnell selbst geschraubt ist.

**NE555** · 16.05.2011, 15:12

Zitat von drp

Statt der Schleife würde ich eine Funktion machen und diese dann automatisch mit setInterval("Funktion()", 1); jede Millisekunde aufrufen.

Ok. Danke!

Habe es jetzt einmal ausprobiert, aber ich glaube dass ich da noch etwas falsch mache:

Click for large view - Uploaded with Skitch

Weil irgendwie muss doch setInterval() öfters aufgerufen werden. Also gehört setInterval dann doch in eine Schleife?

Zitat von drp

BTW: Deine MW-Homepage wird auf dem iPad/iPhone falsch angezeigt. Der Farbverlauf unten scrollt mit, da es für iPads und iPhones kein Position:fixed; gibt...

Danke! Ja mir ist dieser Fehler bekannt, allerdings ist die komplette Seite noch im Aufbau. Zwar geht jetzt schon lange nichts mehr weiter, da ich keine Zeit habe, aber im Sommer wird sie dann fertig.

**NE555** · 16.05.2011, 15:15

Naja... jcarousel macht leider auch nicht all das was ich im Moment brauche...

**drp** · 16.05.2011, 15:36

Ja, du darfst die Variablen nicht in Anführungszeichen lassen, d.h. In dem setInterval("schleife(" + i + ", " + y + ")", 1);

**drp** · 16.05.2011, 15:47

setInterval("func()", time) führt die angegebene Funktion bzw. den angegebenen Code immer wieder nach Ablauf der time aus.
D.h. setInterval("func()", 1000); führt die Funktion func() jede Sekunde (und damit unendlich!) aus.

**NE555** · 16.05.2011, 16:24

Geht leider immer noch nicht

Ich habe das mit dem String und den Variablen berücksichtigt, aber es geht noch nicht... Woran kann's noch liegen? Soll ich die neue Version hochladen?

lg
nico

**drp** · 16.05.2011, 16:33

Ja. Oder wenn das online ist schick doch mal einen Link - ist einfacher.

**NE555** · 16.05.2011, 16:54

Hier nochmal der Link:

http://nicoeinsidler.bplaced.com/p/t...ider/test.html

Thema: Problem mit Schleife bei der Realisierung eines Sliders

Themen-Optionen

Thema durchsuchen

Problem mit Schleife bei der Realisierung eines Sliders

Stichworte

Berechtigungen