עזרה בהוספת משהו קטן לsilder ב js. - הוסטס

dor77 · 10-03-14, 21:35

שלום.
אני מתחיל מאוד ב js, בניתי slider מאוד פשוט, נעזרתי המון בדוגמאות קוד (ככה אני לומד הכי טוב).
אני צריך שכשאר תמונה מספר 1 מופיעה אז בדיב details יופיע משהו שקשור לתמונה מספר 1.
כאשר התמונה 2 תופיע אז בדיב details יופיע משהו אחר, למשל "Image No. 2".
הנה הקוד מקור, אשמח לעזרה, תודה!

PHP קוד:


			


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>

<style type="text/css">

#main_div_silder {
    margin:0 auto;
    width:850px;
    border:1px solid red;
}
.slider {
    float:left;
    position: relative;
    width:44%;
    height:350px;
    overflow: hidden;
    margin: 0px auto;
    border:1px solid orange;
}
.slider img {
    width: 100%;
    height: inherit;
    position:absolute;
    top:0;
    opacity:0;
}

.slider_nav {
    float:left;
    text-align: center;
    border: 2px solid green;
    width:100px;
    margin: 0 auto;
    position:relative;
}

.slider_nav div {
    cursor:pointer;
    width: 50px;
    height: 50px;
    display: inline-block;
    border: 1px solid blue;
}

.slider_nav div:nth-child(1) {
    background:#bbb url('arrowleft.jpg') no-repeat center center;
}

.slider_nav div:nth-child(2) {
    background:#bbb url('arrowrighto.jpg') no-repeat center center;
}

#details {
    width:30%;
    height:350px;
    border:1px solid red;
    float:left;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">
    function slider() {
        
        function animate_slider(){
            $('.slider #'+shown).animate({
                opacity:0 // fade out
            },1000);
            $('.slider #'+next_slide).animate({
                opacity:1.0 // fade in
            },1000);
            //console.log(shown, next_slide);
            shown = next_slide;
        }
    
        function choose_next() {
            next_slide = (shown == sc)? 1:shown+1;
            animate_slider();
        }
    
        $('.slider #1').css({opacity:1}); //show 1st image
        var shown = 1;
        var next_slide;
        var sc = $('.slider').length; // total images
        var iv = setInterval(choose_next,3500);
        $('.slider_nav').hover(function(){
            clearInterval(iv); // stop animation
        }, function() {
            iv = setInterval(choose_next,3500); // resume animation
        });
        $('.slider_nav div').click(function(e){
            var n = e.target.getAttribute('name');
            //console.log(e.target.outerHTML, n);
            if (n=='prev') {
                next_slide = (shown == 1)? sc:shown-1;
            } else if(n=='next') {
                next_slide = (shown == sc)? 1:shown+1;
            } else {
                return;
            }
            animate_slider();
        });
    }
    
    window.onload = slider;

</script>
</head>

<body>

<div id="main_div_silder">
<div class="slider_nav">
    <div name="prev"></div>
</div>
<div class="slider">
    <div id="slideid">
    <img id="1" src="1.gif" alt="" />
    </div>
    <div id="slideid">
    <img id="2" src="2.gif" alt="" />
    </div>
    <div id="slideid">
    <img id="3" src="3.gif" alt="" />
    </div>
</div>
<div id="details">
123
</div>
<div class="slider_nav">
    <div name="next"></div>
</div>
<div style="clear:both;"></div>
</div>


</body>
</html>

אדיר · 10-03-14, 21:42

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

dor77 · 10-03-14, 22:01

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

אדיר · 10-03-14, 22:15

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

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

dor77 · 10-03-14, 22:33

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

10-03-14, 21:35	# 1
dor77 חבר וותיק מיני פרופיל תאריך הצטרפות: Jan 2008 הודעות: 1,650	עזרה בהוספת משהו קטן לsilder ב js. שלום. אני מתחיל מאוד ב js, בניתי slider מאוד פשוט, נעזרתי המון בדוגמאות קוד (ככה אני לומד הכי טוב). אני צריך שכשאר תמונה מספר 1 מופיעה אז בדיב details יופיע משהו שקשור לתמונה מספר 1. כאשר התמונה 2 תופיע אז בדיב details יופיע משהו אחר, למשל "Image No. 2". הנה הקוד מקור, אשמח לעזרה, תודה! PHP קוד: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slideshow</title> <style type="text/css"> #main_div_silder { margin:0 auto; width:850px; border:1px solid red; } .slider { float:left; position: relative; width:44%; height:350px; overflow: hidden; margin: 0px auto; border:1px solid orange; } .slider img { width: 100%; height: inherit; position:absolute; top:0; opacity:0; } .slider_nav { float:left; text-align: center; border: 2px solid green; width:100px; margin: 0 auto; position:relative; } .slider_nav div { cursor:pointer; width: 50px; height: 50px; display: inline-block; border: 1px solid blue; } .slider_nav div:nth-child(1) { background:#bbb url('arrowleft.jpg') no-repeat center center; } .slider_nav div:nth-child(2) { background:#bbb url('arrowrighto.jpg') no-repeat center center; } #details { width:30%; height:350px; border:1px solid red; float:left; } </style> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> function slider() { function animate_slider(){ $('.slider #'+shown).animate({ opacity:0 // fade out },1000); $('.slider #'+next_slide).animate({ opacity:1.0 // fade in },1000); //console.log(shown, next_slide); shown = next_slide; } function choose_next() { next_slide = (shown == sc)? 1:shown+1; animate_slider(); } $('.slider #1').css({opacity:1}); //show 1st image var shown = 1; var next_slide; var sc = $('.slider').length; // total images var iv = setInterval(choose_next,3500); $('.slider_nav').hover(function(){ clearInterval(iv); // stop animation }, function() { iv = setInterval(choose_next,3500); // resume animation }); $('.slider_nav div').click(function(e){ var n = e.target.getAttribute('name'); //console.log(e.target.outerHTML, n); if (n=='prev') { next_slide = (shown == 1)? sc:shown-1; } else if(n=='next') { next_slide = (shown == sc)? 1:shown+1; } else { return; } animate_slider(); }); } window.onload = slider; </script> </head> <body> <div id="main_div_silder"> <div class="slider_nav"> <div name="prev"></div> </div> <div class="slider"> <div id="slideid"> <img id="1" src="1.gif" alt="" /> </div> <div id="slideid"> <img id="2" src="2.gif" alt="" /> </div> <div id="slideid"> <img id="3" src="3.gif" alt="" /> </div> </div> <div id="details"> 123 </div> <div class="slider_nav"> <div name="next"></div> </div> <div style="clear:both;"></div> </div> </body> </html> __________________ מתכנת php אמין ומקצועי. מחירים נוחים! יצירת קשר: 0544378743

10-03-14, 21:42	# 2
אדיר עסק רשום [?] מיני פרופיל תאריך הצטרפות: Mar 2008 מיקום: אשקלון הודעות: 1,714	מה ניסית לעשות ולא הצלחת? מה לא הבנת? לתת לך את הקוד זה לא הפתרון, ככה אתה לא לומד - ככה אתה מגיע לתוצאה בלי ללמוד. __________________ LinkedIn \| אני, אדיר \| העלאת תמונות

10-03-14, 22:01	# 3
dor77 חבר וותיק מיני פרופיל תאריך הצטרפות: Jan 2008 הודעות: 1,650	שוב, כאשר התמונה הראשונה מופיע, בדיב details אמור להופיע טקטס שקשור לתמונה הזו בלבד. בתמונה 2 כנ"ל. לא מצליח להבין איך מקשרים בין התמונה שכרגע מופיעה לבין התוכן ב details. __________________ מתכנת php אמין ומקצועי. מחירים נוחים! יצירת קשר: 0544378743

10-03-14, 22:15	# 4
אדיר עסק רשום [?] מיני פרופיל תאריך הצטרפות: Mar 2008 מיקום: אשקלון הודעות: 1,714	מעשית, לא תיאורתית. מה הבעיה לקשר בין התמונה לבין הטקסט? אתה יודע איזה תמונה צריכה להיות מוצגת, אתה הרי מציג אותה. תבין איך הקוד שהעתקת עובד, שוב - אתה לא לומד ככה, אתה סתם מעתיק קוד וגורם לדברים לקרות. __________________ LinkedIn \| אני, אדיר \| העלאת תמונות

10-03-14, 22:33	# 5
dor77 חבר וותיק מיני פרופיל תאריך הצטרפות: Jan 2008 הודעות: 1,650	את רובו העתקתי, אני מודה.. הרעיון שלי הוא להוסיף דיב שעוטף כל תמונה..בדיב הזה לשים p כלשהו.. העניין הוא איך להציג כל פעם את הדיב המתאים.. __________________ מתכנת php אמין ומקצועי. מחירים נוחים! יצירת קשר: 0544378743


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)