11521 sujets

JavaScript, DOM et API Web HTML5

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) :
<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 ! Smiley cligne
J'ai juste collé tout le css de mon Wordpress donc c'est vraiment pas ouf désolé Smiley ohwell
https://codepen.io/anon/pen/wbwwKO

En gros l'idée de ce programme est la suivante :
Je veux que l'image de gauche switche (comme sur un slider) selon un intervalle, mais qu'en cliquant sur les vignettes de droite on puisse voir une des images en particulier. L'effet slider repart alors de l'image provenant de la vignette cliquée.
Modifié par Myrial (03 May 2019 - 13:17)
Wow merci beaucoup, je vais regarder tout ça et l'adapter à mes besoins ! En tous cas c'est exactement ce que je voulais, un grand merci à toi Smiley cligne