אהלן
אני מנסה ליצור סליידר פשוט שמזהה כמה תמונות יש בתוך ה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);
HTML קוד:
<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);
|
עובד כמו שצריך !