מעבר תמונה - JS

[Shlomi062]

אהלן, יש לי סקריפט שמעביר תמונות באמצעות JS כמובן.

<script type="text/javascript">
image = new Array();
image[0] = "1.jpg";
image[1] = "2.jpg";
image[2] = "3.jpg";
image[3] = "4.jpg";
image[4] = "1.jpg";

setInterval("document.getElementById('img_rnd').src=image[Math.round(Math.random()*(image.length-1))]",3000);


</script>

ניסיתי ללא הצלחה להוסיף עמעום בכל מעבר תמונה, ממש כמו כאן - http://iamacamera.org/sandbox/photoshuffler/

אשמח לקבל הסבר כיצד לעשות זאת, תודה מראש

[BuildDream]

אם תעשה את זה עם שימוש בספריית jQuery זה יהיה לך כל כך פשוט http://www.jquery.com

אתה יכול לעשות אפקטים כמו של המעבר המעומעם שהראית פה באמצעות שורה אחת קצרה..

[Itay]

זה יותר יעזור - http://api.jquery.com/fadeIn/
בכל מקרה, בשביל להגיע לתוצאה שיש שם זה יותר משורה אחת את האמת, אבל הצורה הכי פשוטה תהיה להסתיר את התמונה הקיימת עם fadeOut (של jQuery), להחליף את ה-src ואז לעשות fadeIn

[IgalSt]

כמו שכבר הציעו לך, הדרך הפשוטה ביותר תהיה להשתמש בספריה קיימת, דוגמאת jQuery.

אם אתה רוצה לממש פתרון בעצמך, אז צורת העבודה תהיה כזאת:
כל התמונות יהיו עם position:absolute לאבא רלטיבי שלהן (ב-CSS).
במעבר בין תמונה לתמונה עליך לשנות את הערך ה-css-י opacity של התמונה שאתה יוצא ממנה מ-1 ל-0, ובמקביל לשנות את הערך של התמונה שאתה רוצה להציג מ-0 ל-1.
אפשר לממש את זה בכ-5 שורות קוד לדעתי, אבל אולי תצטרך לטפל בכמה מקרי קצה של דפדפנים מיושנים דוגמאת IE קטן מ-9 שצריכים פילטר במקום זה.

[Shlomi062]

תודה רבה חברים, עזרתם לי רבות.