עזרה בהוספת משהו קטן ל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>
|
