HTML:
$(document).ready(function(){
$('#2').hide();
$('#3').hide();
});
setInterval(function() {
$('#slideshow > div:first')
.fadeOut()
.next().fadeIn()
.end()
.appendTo('#slideshow');
}, 5000);
$(document).ready(function(){
$('#1').click(function(){
$('#1').fadeOut(function(){
$('#2').fadeIn();
});
});
});
$(document).ready(function(){
$('#2').click(function(){
$('#2').fadeOut(function(){
$('#3').fadeIn();
});
});
});
$(document).ready(function(){
$('#3').click(function(){
$('#3').fadeOut(function(){
$('#1').fadeIn();
});
});
});
$(document).ready(function(){
$('#round1').click(function(){
$('#slideshow div').fadeOut(function(){
$('#1').fadeIn(function(){
$('#round1').css("background","black");
});
});
});
});
$(document).ready(function(){
$('#round2').click(function(){
$('#slideshow div').fadeOut(function(){
$('#2').fadeIn(function(){
$('#round2').css("background","black");
});
});
});
});
$(document).ready(function(){
$('#round3').click(function(){
$('#slideshow div').fadeOut(function(){
$('#3').fadeIn(function(){
$('#round3').css("background","black");
});
});
});
});
HTML:
<div id="around-slideshow">
<div id="slideshow">
<div id="1">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/slide1.jpg" height="360px" width="960px" />.
</div>
<div id="2">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/slide2.jpg" height="360px" width="960px" />
</div>
<div id="3">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/slide3.jpg" height="360px" width="960px" />
</div>
</div>
<div id="rounds">
<div id="round1">
</div>
<div id="round2">
</div>
<div id="round3">
</div>
</div>
</div>
HTML:
#around-slideshow {
margin: 0;
width: 100%;
background: #C0C0C0 ;
height: 500px;
float: left;
}
#slideshow {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 960px;
height: 360px;
overflow: hidden;
}
#rounds {
margin: 10px auto;
margin-bottom: none;
height: 30px;
width: 20%;
border: 1px solid #fff;
}
#round1, #round2, #round3 {
margin-top: 5px;
margin-left: 15%;
height: 20px;
width: 20px;
border-radius: 20px;
border: 1px solid #000;
float: left;
}Dit is een Javascript bestand, een PHP bestand (met HTML en Wordpress erin) en een CSS bestand.
Maar ik heb nu geregeld dat om de 5 seconden de afbeelding veranderd naar de volgende afbeelding en als je op #round1, #round2 en #round3 hij naar een bepaalde afbeelding gaat.
Maar nu wil ik iets gaan doen, wat maar niet lukt...
Ik wil dat als ik op #round1, #round2 of #round3 heb geklikt dat dan de functie met setInterval opnieuw begint.
Weet iemand hoe ik hier voor zorg?
