הוסטס - פורום אחסון האתרים הגדול בישראל - מעבר תמונה

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - מעבר תמונה - JS (https://hosts.co.il/forums/showthread.php?t=93418)

Shlomi062

14-11-11 20:11

מעבר תמונה - JS

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

HTML קוד:

<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

14-11-11 20:39

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

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

Itay	14-11-11 21:08

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

IgalSt

14-11-11 23:01

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

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

Shlomi062

14-11-11 23:13

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

כל הזמנים הם GMT +2. הזמן כעת הוא 15:59.