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(){
slideShow();
});
function slideShow(){
var showing = $('#wrap .is-showing');
var next = showing.next().length ? showing.next(): showing.parent().children(':first');
showing.fadeOut(800, function(){
next.fadeIn(800).addClass('is-showing');
})
.removeClass('.is-showing');
setTimeout(slideShow, 5000);
}
</script>
</head>
<body>
<div id="wrap">
<img src="slide1.jpg" width="960" height="375" alt="image 1" class="is-showing" />
<img src="slide2.jpg" width="960" height="375" alt="image 2" />
<img src="slide3.jpg" width="960" height="375" alt="image 3" />
<img src="slide4.jpg" width="960" height="375" alt="image 4" />
<img src="slide5.jpg" width="960" height="375" alt="image 5" />
</div>
</body>
</html>
HTML:
#wrap {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 375px;
width: 960px;
overflow: hidden;
}
#wrap img {
display: none;
}
#wrap .is-showing {
display: inline;
}Dit is een HTML (met Javascript erin) bestand en een CSS bestand.
Dit is gemaakt voor het veranderen van een afbeelding met een totaal van 5 afbeeldingen.
Alleen mijn veranderende afbeelding komt niet verder dan afbeelding 2.
Hij gaat van afbeelding 1 naar afbeelding 2 en dan van afbeelding 2 weer naar afbeelding 2.
Hoe zorg ik ervoor dat ie van afbeelding 2 naar afbeelding 3 en van afbeelding 3 naar afbeelding 4 en zo voort?
P.S. Weet iemand nog of er een tutorial is om het te krijgen net zoals hier: http://www.google.nl/intl/nl/mail/help/about.html
