4125
צפיות
צפיות
7
תשובות
תשובות
צירוף slideshow לאתר
שלום לכולם,
הורדתי מהאתר hotscripts קובץ שמציג תמונות מתחלפות, אני רוצה לצרף אותו לאתר שאני בונה.
כיצד אני עושה זאת?
הקובץ מכיל תיקייה עם מסמכים ב PHP , JS , CSS ותיקיית תמונות.
אני כותב ב CSHTML , ומשתמש ב WEBMATRIX.
שמתי את התיקייה שהורדתי בתיקייה של האתר, מה ההמשך?
תודה מראש,
מושיקו.
7 תשובות
יש קוד הרבה יותר פשוט מאשר להסתבך עם כל מיני קבצים.
html:
<div id="slideshow">
<div>
<img src="">
</div>
<div>
<img src="">
</div>
</div>
css:
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
jquery:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
div-אתה יכול להכניס כל מה שאתה רוצה בתוך ה
תודה, הקוד יוצר מסגרת נחמדה ומציג תמונה, אבל אין החלפה בין התמונות.
אודה לך גם אם תוכל להסביר את החלק של ה jquery.
תודה,
מושיקו.
בטח שיש החלפה בין התמונות!
צריך להכניס את קוד ה-jquery ככה
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"<script>
להכניס את קוד ה-Jquery
</script>
הקוד המלא יראה כך:
<html>
<head>
<title></title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/250px-Biandintz_eta_zaldiak_-_modified2.jpg"></div>
<div>
<img src="http://niranbd.com/newcity/vcitypics/905948/1916762206.jpg"></div>
</div>
</body>
</html>
תודה! עושה בעיות בסבב הראשון של התמונות, למשל אם יש 2 תמונות אז יש בעיה ב 2 החלפות הראשונות, אם יש 10 תמונות אז יש בעיה ב 10 החלפות הראשונות,
כל פעם הוא מציג את התמונה האחרונה נגיד ויש 5 תמונות אז סדר ההצגה הוא כך:
1-5-2-5-3-5-4-5-5-5-1-2-3-4-5
ובסבב הראשון הוא לא מחכה אלא ישר עובמר תמונה.
אבל אחרי זה עובד כמו שצריך!
אשמח אם תוכל להגיד לי איפה הבעיה (כי יש לי 50 תמונות ולכן זה לא עובד טוב ב 50 ההחלפות הראשונות… קצת בעיה)
בנוסף אשמח אם תסביר לי מה עושה השורה הבאה (והסבר קצר כללי על הפונקציה)
#slideshow > div:first
האם יש פיתרון לבעיה גם אצלי אותה בעיה
האמת שאני ממש לא זוכר… זה היה ממש מזמן הזנחתי קצת את התחום…