• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Afbeelding 'fadet' maar tot afbeelding 2 i.p.v. afbeelding 5

Status
Niet open voor verdere reacties.

jorenman

Gevestigd lid
Lid geworden
7 jan 2014
Berichten
397
Waarderingsscore
0
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
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan