HTML:
<!doctype html>
<html>
<head>
<title>Veranderende afbeelding</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function(){
$("#image2").hide();
$("#image3").hide();
$("#image4").hide();
$("#image5").hide();
});
$(document).ready(function(){
$("#image1 #next").click(function(){
$("#image1").fadeOut(function(){
$("#image2").fadeIn();
})
})
});
$(document).ready(function(){
$("#image1 #previous").click(function(){
$("#image1").fadeOut(function(){
$("#image5").fadeIn();
})
})
});
$(document).ready(function(){
$("#image2 #next").click(function(){
$("#image2").fadeOut(function(){
$("#image3").fadeIn();
})
})
});
$(document).ready(function(){
$("#image2 #previous").click(function(){
$("#image2").fadeOut(function(){
$("#image1").fadeIn();
})
})
});
$(document).ready(function(){
$("#image3 #next").click(function(){
$("#image3").fadeOut(function(){
$("#image4").fadeIn();
})
})
});
$(document).ready(function(){
$("#image3 #previous").click(function(){
$("#image3").fadeOut(function(){
$("#image2").fadeIn();
})
})
});
$(document).ready(function(){
$("#image4 #next").click(function(){
$("#image4").fadeOut(function(){
$("#image5").fadeIn();
})
})
});
$(document).ready(function(){
$("#image4 #previous").click(function(){
$("#image4").fadeOut(function(){
$("#image3").fadeIn();
})
})
});
$(document).ready(function(){
$("#image5 #next").click(function(){
$("#image5").fadeOut(function(){
$("#image1").fadeIn();
})
})
});
$(document).ready(function(){
$("#image5 #previous").click(function(){
$("#image5").fadeOut(function(){
$("#image4").fadeIn();
})
})
});
</script>
</head>
<body>
<div id="wrap">
<div id="image1">
<img src="slide1.jpg" width="960" height="375">
<div id="previous"></div>
<div id="next"></div>
</div>
<div id="image2">
<img src="slide2.jpg" width="960" height="375">
<div id="previous"></div>
<div id="next"></div>
</div><div id="image3">
<img src="slide3.jpg" width="960" height="375">
<div id="previous"></div>
<div id="next"></div>
</div><div id="image4">
<img src="slide4.jpg" width="960" height="375">
<div id="previous"></div>
<div id="next"></div>
</div><div id="image5">
<img src="slide5.jpg" width="960" height="375">
<div id="previous"></div>
<div id="next"></div>
</div>
</div>
</body>
</html>
HTML:
#wrap {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 2000px;
width: 960px;
overflow: hidden;
}
#next {
margin-top: -385px;
background: url(rightArrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
float: right;
height: 375px;
width: 100px;
position: relative;
z-index: 99;
}
#previous {
margin-top: -385px;
background: url(leftArrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
float: left;
height: 375px;
width: 100px;
position: relative;
z-index: 99;
}Dit is een HTML (met Javascript erin) en een CSS bestand.
Dit is een zelfgemaakte slideshow, ik weet dat het heel veel overbodig Javascript code is, maar ik ben nog maar een beginneling en dit leek mij dus het makkelijkst.
Hierbij kan je pas naar de volgende image als je op #next of #previous hebt geklikt, weet iemand hoe ik hier een timer op kan zetten of ook een voorbeeld van een script kan geven?
Alvast heel erg bedankt!
