כיצד לבנות מצגת JavaScript בשלושה שלבים פשוטים

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

היום אני אראה לך כיצד לבנות מצגת JavaScript מאפס. בואו לקפוץ ישר פנימה!

---

---

תנאים מוקדמים

תצטרך לדעת כמה דברים לפני שתתחיל בקידוד. לצד דפדפן אינטרנט ועורך טקסט לבחירתך (אני ממליץ טקסט נשגב ), תצטרך קצת ניסיון עם HTML , CSS , JavaScript , ו jQuery .

אם אינך בטוח כל כך בכישוריך, הקפד לקרוא את המדריך שלנו לשימוש במודל אובייקט המסמך וטיפים אלה ללימוד CSS. אם אתה בטוח ב- JavaScript אך מעולם לא השתמשת ב- jQuery, עיין במדריך הבסיסי שלנו ל- jQuery.

1. תחילת העבודה

מצגת שקופיות זו דורשת מספר תכונות:

1. תמיכה בתמונות
2. פקדים לשינוי תמונות
3. כיתוב טקסט
4. מצב אוטומטי

נראה רשימת תכונות פשוטה. מצב אוטומטי יקדם את התמונות אוטומטיות לתמונה הבאה ברצף. להלן הסקיצה הגסה שעשיתי לפני כתיבת קוד כלשהו:

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

---

---

הנה ה- HTML הראשוני שאתה צריך כדי להתחיל. שמור זאת בקובץ בעל שם מתאים, כגון index.html :







MUO Slideshow










Windmill





Plant





Dog


❮
❯




כך נראה הקוד:

---

---

זה קצת שטויות לא? בואו נפרק אותו לפני שנשפר אותו.

קוד זה מכיל 'סטנדרטי' HTML , רֹאשׁ , סִגְנוֹן , תַסרִיט , ו גוּף תגים. חלקים אלה הם מרכיבים חיוניים של כל אתר. JQuery כלול באמצעות ה- CDN של Google - שום דבר ייחודי או מיוחד עד כה.

בתוך הגוף יש div עם מזהה של showContainer . זהו עטיפה או מיכל חיצוני לאחסון מצגת השקופיות. תוכל לשפר זאת בהמשך עם CSS. בתוך מיכל זה ישנם שלושה בלוקים של קוד, לכל אחד מהם מטרה דומה.

כיתת הורה מוגדרת עם שם המחלקה של imageContainer :

זה משמש לאחסון שקופית אחת - תמונה וכיתוב מאוחסנים בתוך מיכל זה. לכל מיכל יש מזהה ייחודי, המורכב מהדמויות בתוך ה_ ומספר. לכל מיכל יש מספר אחר, מאחד לשלושה.

כשלב אחרון, מתייחסים לתמונה, והכיתוב מאוחסן בתוך div עם כּוֹתֶרֶת מעמד:



Dog


יצרתי את התמונות שלי עם שמות קבצים מספריים ושמרתי אותן בתיקייה בשם תמונות . אתה יכול לקרוא לשלך איך שאתה אוהב, בתנאי שתעדכן את ה- HTML כך שיתאים.

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

לבסוף, לחצני הניווט נוצרים. אלה מאפשרים למשתמש לנווט בין התמונות:

❮
❯

אלה ישות HTML קודים משמשים להצגת החצים קדימה ואחורה, באופן דומה לאופן שבו פועלים גופני אייקונים.

2. ה- CSS

כעת, כאשר מבנה הליבה קיים, הגיע הזמן לגרום לו להיראות יפה . כך זה ייראה אחרי הקוד החדש הזה:

הוסף CSS זה בין שלך סִגְנוֹן תגיות:

html {
font-family: helvetica, arial;
}
#showContainer {
/* Main wrapper for all images */
width: 670px;
padding: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.navButton {
/* Make buttons look nice */
cursor: pointer;
float: left;
width: 25px;
height: 22px;
padding: 10px;
margin-right: 5px;
overflow: hidden;
text-align: center;
color: white;
font-weight: bold;
font-size: 18px;
background: #000000;
opacity: 0.65;
user-select: none;
}
.navButton:hover {
opacity: 1;
}
.caption {
float: right;
}
.imageContainer:not(:first-child) {
/* Hide all images except the first */
display: none;
}

זה נראה הרבה יותר טוב עכשיו נכון? בואו נסתכל על הקוד.

אני משתמש בתמונות לדוגמא שכולן 670 על 503 פיקסלים , אז מצגת שקופיות זו תוכננה בעיקר סביב תמונות בגודל כזה. יהיה עליך להתאים את CSS כראוי אם תרצה להשתמש בתמונות בגודל אחר. אני ממליץ לך לשנות את גודל התמונות שלך לגדלים תואמים - תמונות שונות במידות שונות יגרמו לבעיות עיצוב.

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

1. סמן: מצביע - פעולה זו משנה את הסמן מחץ לאצבע מצביעה כאשר אתה מעביר את הסמן מעל הלחצנים.
2. אטימות: 0.65 - הדבר מגביר את שקיפות הכפתורים.
3. משתמש-בחר: אין - זה מבטיח שלא תוכל להדגיש את הטקסט בכפתורים בטעות.

אתה יכול לראות את התוצאה של רוב הקוד הזה בכפתורים:

החלק המורכב ביותר כאן הוא הקו המוזר הזה למראה:

.imageContainer:not(:first-child) {

זה עשוי להיראות די יוצא דופן, אולם זה די מסביר את עצמו.

ראשית, הוא מכוון לכל רכיב באמצעות imageContainer מעמד. ה :לֹא() התחביר קובע שכל רכיב בתוך הסוגריים צריך להיות לא נכלל מהסגנון הזה. סוף - סוף, ה :ילד ראשון התחביר קובע כי CSS זה צריך למקד לכל רכיב התואם את השם אבל להתעלם מהאלמנט הראשון. הסיבה לכך פשוטה. מכיוון שמדובר במצגת, נדרשת רק תמונה אחת בכל פעם. CSS זה מסתיר את כל התמונות מלבד התמונה הראשונה.

3. ה- JavaScript

החלק האחרון של הפאזל הוא ה- JavaScript. זהו ההיגיון שבאמת גורם למצגת לפעול כראוי.

הוסף קוד זה ל- תַסרִיט תָג:

$(document).ready(function() {
$('#previous').on('click', function(){
// Change to the previous image
$('#im_' + currentImage).stop().fadeOut(1);
decreaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
$('#next').on('click', function(){
// Change to the next image
$('#im_' + currentImage).stop().fadeOut(1);
increaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
var currentImage = 1;
var totalImages = 3;
function increaseImage() {
/* Increase currentImage by 1.
* Resets to 1 if larger than totalImages
*/
++currentImage;
if(currentImage > totalImages) {
currentImage = 1;
}
}
function decreaseImage() {
/* Decrease currentImage by 1.
* Resets to totalImages if smaller than 1
*/
--currentImage;
if(currentImage <1) {
currentImage = totalImages;
}
}
});

זה אולי נראה אינטואיטיבי, אבל אני עומד לדלג על בלוקי הקוד הראשוניים, ולקפוץ ישר להסביר את הקוד מאמצע הדרך-אל תדאג, אני מסביר את כל הקוד!

עליך להגדיר שני משתנים. (הנה כיצד להגדיר משתנים ב- JavaScript.) ניתן לראות משתנים אלה כמשתני התצורה העיקריים של מצגת השקופיות:

var currentImage = 1;
var totalImages = 3;

אלה מאחסנים את המספר הכולל של התמונות במצגת השקופיות ואת מספר התמונה שאפשר להתחיל בה. אם יש לך יותר תמונות, פשוט שנה את totalImages משתנה למספר התמונות הכולל שיש לך.

שתי הפונקציות להגדיל תמונה ו ירידה בתמונה להתקדם או לסגת תמונה נוכחית מִשְׁתַנֶה. האם משתנה זה ירד מאחד או גבוה מ- totalImages , הוא מתאפס לאחד או totalImages . זה מבטיח שמצגת השקופיות תצא לולאה ברגע שהיא תגיע לסוף.

בחזרה לקוד בהתחלה. קוד זה 'ממקד' לכפתורים הבאים והקודמים. כאשר אתה לוחץ על כל כפתור, הוא מכנה את המתאים להגביר אוֹ לְהַקְטִין שיטות. לאחר השלמתו, הוא פשוט דוהה את התמונה על המסך, ודהה בתמונה החדשה (כהגדרתה תמונה נוכחית מִשְׁתַנֶה).

ה תפסיק() השיטה מובנית ב- jQuery. זה מבטל כל אירוע בהמתנה. זה מבטיח שכל לחיצה על כפתור תהיה חלקה, ופירוש הדבר שאין לך 100 לחיצות על כל הלחצנים שמחכים לביצוע אם אתה קצת משתגע על העכבר. ה fadeIn (1) ו fadeOut (1) שיטות לדעוך את התמונות החוצה או החוצה לפי הצורך. המספר מציין את משך ההדהייה באלפיות השנייה. נסה לשנות את זה למספר גדול יותר כמו 500. מספר גדול יותר גורם לזמן מעבר ארוך יותר. עם זאת, לך רחוק מדי, ותוכל להתחיל לראות אירועים מוזרים או 'מהבהבים' בין שינויי התמונה. להלן מצגת השקופיות בפעולה:

התקדמות אוטומטית

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

חלונות 10 לא מתחבר ל- wifi

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

הנה ה- JavaScript החדש שאתה צריך - הוסף אותו לאחר ה- ירידה בתמונה פוּנקצִיָה:

window.setInterval(function() {
$('#previous').click();
}, 2500);

אין כאן הרבה דברים. ה window.setInterval שיטה תריץ פיסת קוד באופן קבוע, כהגדרתו בזמן שצוין בסוף. הזמן 2500 (באלפיות השנייה) פירושו שמצגת שקופיות זו תתקדם כל 2.5 שניות. מספר קטן יותר פירושו שכל תמונה תתקדם בקצב מהיר יותר. ה נְקִישָׁה שיטה מפעילה את הכפתורים להפעלת הקוד כאילו משתמש לחץ על הכפתור בעכבר שלו.

אם אתה מוכן לאתגר ה- JavaScript הבא שלך, נסה לבנות אתר עם בונה אתרים סטטי כמו GatsbyJS, או מסגרת חזיתית כמו Vue. אם אתה לומד רובי, ג'קיל היא גם אופציה. הנה איך ג'קיל וגאטסבי ג'יי מסתדרים זה בזה.

קרדיט תמונה: Tharanat Sardsri דרך Shutterstock.com

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 8 אתרי האינטרנט הטובים ביותר להורדת ספרי שמע בחינם

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

קרא הבא נושאים קשורים

• תִכנוּת
• JavaScript
• עיצוב אתרים

על הסופר ג'ו קוברן(136 מאמרים פורסמו)

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

עוד מאת ג'ו קוברן

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה