בניית סליידר תמונות פשוט

[איציק ברבי]

אהלן
אני מנסה ליצור סליידר פשוט שמזהה כמה תמונות יש בתוך הDIV
וממספר אותם.
את החלק הזה כבר עשיתי.

$("div#slider img").css("display","none");
	for(var i = 0;i<$("div#slider img").length;i++){
		$("div#slider img").eq(i).addClass(i.toString());
	}
	$("div#slider img:first-child").css("display","block");
	function slider(correct,from){
		console.log(correct);
		if($("div#slider img."+correct).css("display") == 'block'){
			$("div#slider img."+(parseInt(correct)+1)).css("display","block");
			$("div#slider img."+correct).css("display","none");
		}
	}
	setInterval(
		function(){
			for(var i = 0;i<$("div#slider img").length;i++){
				slider(i,$("div#slider img").length);
			}
		}
	,3000);

<div id="slider">
							<img src="upload/1.png" />
							<img src="upload/uniuqe.png" />
							<img src="upload/pro2.png" />
					</div>

מה שבעקרון קורה כאן ספציפית בקוד זה שהוא מסיר את התמונה הראשונה מהעמוד.

עשיתי קוד בלולאת פור שרץ על כל התמונות, מסיר מה-i הקודם את ה display
ונותן ל i+1 display:block
עכשיו
ברגע שהוא מגיע לתמונה האחרונה אני לא מצליח לאפס את הI
כלומר

if(i == $("div#slider img").length)
 i = 0;

הקוד כמובן בתחתית הFOR
זה פשוט תוקע את הדפדפן.


החלטתי לוותר על הלולאות והצלחתי לבצע את זה:

$("div#slider img").css("display","none");
for(var i = 0;i<$("div#slider img").length;i++){
$("div#slider img").eq(i).addClass(i.toString());
}
$("div#slider img:first-child").addClass("selected");
setInterval(
function(){
if($("div#slider img.selected").is(':last-child')){
$("div#slider img.selected:last-child").removeClass("selected");
$("div#slider img:first-child").addClass("selected");
}else{
$("div#slider img.selected").next().addClass("selected2");
$("div#slider img.selected").removeClass("selected");
$("div#slider img.selected2").addClass("selected").removeClass(" selected2");
}
}
,3000);

עובד כמו שצריך !