Bonjour,
Comme indiqué dans le titre, j'ai besoin d'exécuter une boucle infinie avec un intervalle défini. En effet, mon objectif est de créer un slider qui switche entre plusieurs images automatiquement.
Voici mon code (JS d'abord puis HTML tiré de Wordpress) :
Actuellement, ma page freeze au chargement, j'en déduis qu'il y a un problème avec setInterval qui ne doit pas fonctionner correctement. J'ai vu plusieurs méthodes possibles à mettre en place avec setInterval mais aucune n'a pu m'aider. Voyez-vous le problème svp ?
Merci d'avance !
Comme indiqué dans le titre, j'ai besoin d'exécuter une boucle infinie avec un intervalle défini. En effet, mon objectif est de créer un slider qui switche entre plusieurs images automatiquement.
Voici mon code (JS d'abord puis HTML tiré de Wordpress) :
<script>
var tab=new Array();
tab[0]=".vignette-1";
tab[1]=".vignette-2";
tab[2]=".vignette-3";
tab[3]=".vignette-4";
tab[4]=".vignette-5";
tab[5]=".vignette-6";
var count;
var init = 0;
var intervalID;
$(".vignette-conteneur").on('click',function(){
$(".change-image").fadeOut(0);
$(".change-image").html( $(this).find("aside").html());
$(".change-image").fadeIn(100);
});
/*function clignotement(arg){
intervalID = window.setInterval(flashVignette(arg), 1000,);
}*/
function flashVignette(count){
while(count<=5){
$(".change-image").fadeOut(50);
$(".change-image").html( $(tab[count]).find("aside").html());
$(".change-image").fadeIn(50);
count = count+1;
if (count == 6){
count = 0;
}
intervalID = window.setInterval( flashVignette(), 1000);
}
}
flashVignette(0);
$("vignette-conteneur").on('click', function(){
clearInterval(intervalID);
var classe = $(this).find("img").className;
var chiffre = parseInt(classe,10);
chiffre = chiffre-1;
flashVignette(chiffre);
});
</script><div class="grid-parent"><div class="change-image"><img src="https://wpbeaches.com/wp-content/uploads/2018/09/black.jpg" alt=""></div><div class="explication-exemples">
<div class="explication-exemples">
<div>
<h2>Valorisez le visuel de vos produits</h2>
<p>Vous souhaitez optimiser vos ventes et leur visibilité sur le web ? Notre service packshot valorise vos produits avec des visuels professionnels à un prix compétitif. Nous prenons en charge vos produits et réalisons des images de qualité fidèles à vos produits. Avec des visuels attractifs, vous capterez alors l’attention d’un plus grand nombre d’acheteurs potentiels.</p>
</div>
<div class="marketplaces">
<figure class="wp-block-image"><a href="https://#" target="_blank" rel="noreferrer noopener"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/05/amazon.png" alt="" class="wp-image-1147" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/05/amazon.png 331w, http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/05/amazon-300x91.png 300w" sizes="(max-width: 331px) 100vw, 331px"></a></figure>
<figure class="wp-block-image"><a href="https://#" target="_blank" rel="noreferrer noopener"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/05/ebay.png" alt="" class="wp-image-1148"></a></figure>
<figure class="wp-block-image"><a href="https://#" target="_blank" rel="noreferrer noopener"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/05/prestashop.png" alt="" class="wp-image-1149"></a></figure>
<figure class="wp-block-image"><a href="https://#" target="_blank" rel="noreferrer noopener"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/05/woocommerce.png" alt="" class="wp-image-1150"></a></figure>
</div>
<div class="autres-exemples">
<p style="text-align:right"><strong>Voir d’autres exemples :</strong></p>
<div class="vignette-conteneur">
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/black.jpg" class="vignette-1">
<aside>
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/black.jpg">
</aside>
</div>
<div class="vignette-conteneur">
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/red.jpg" class="vignette-2">
<aside>
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/red.jpg">
</aside>
</div>
<div class="vignette-conteneur">
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/blue.jpg" class="vignette-3">
<aside>
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/blue.jpg">
</aside>
</div>
<div class="vignette-conteneur">
<img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/galaxy-3608029_960_720-4.jpg" class="vignette-4">
<aside>
<img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/galaxy-3608029_960_720-4.jpg">
</aside>
</div>
<div class="vignette-conteneur">
<img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/ivMI9qg-studio-ghibli-wallpapers-1-1024x655.jpg" class="vignette-5">
<aside>
<img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/ivMI9qg-studio-ghibli-wallpapers-1-1024x655.jpg">
</aside>
</div>
<div class="vignette-conteneur">
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/yellow.jpg" class="vignette-6">
<aside>
<img src="https://wpbeaches.com/wp-content/uploads/2018/09/yellow.jpg">
</aside>
</div>
</div></div></div></div>Actuellement, ma page freeze au chargement, j'en déduis qu'il y a un problème avec setInterval qui ne doit pas fonctionner correctement. J'ai vu plusieurs méthodes possibles à mettre en place avec setInterval mais aucune n'a pu m'aider. Voyez-vous le problème svp ?
Merci d'avance !
