COMMENT FAIRE DEFILER DES IMAGES AVEC ARRÊT SUR CHAQUE IMAGE

Si l'on veut présenter un diaporama avec défilement automatique d'images qui n'apparaisent que l'une après l'autre, il convient d'utiliser du html, du CSS et du javascript. 

ELEMENTS DU CODE

HTML

<div class="slideshow">

       <ul>

             <li><img src="image1.jpg" alt="" width="300" height="300" /></li>

             <li><img src="image2.jpg" alt="" width="300" height="300" /></li>

             <li><img src="image3.jpg" alt="" width="300" height="300" /></li>             

</div>

CSS

.slideshow {

   width: 300px;

   height: 300px;

   overflow: hidden;

   border: 3px solid #F2F2F2;

}

.slideshow ul {

    /* 4 images donc 4 x 100% */

   width: 300%;

   height: 300px;

   padding:0; margin:0;

   list-style: none;

}

.slideshow li {

   float: left;

}

JAVASCRIPT

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

   $(function(){

      setInterval(function(){

         $(".slideshow ul").animate({marginLeft:-350},800,function(){

            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));

         })

      }, 3500);

   });

</script>

CONSTITUTION DU CODE

On place d'abord le HTML (En bleu)

<div class="slideshow"><style>

.slideshow {

   width: 300px;

   height: 300px;

   overflow: hidden;

   border: 3px solid #F2F2F2;

}

.slideshow ul {

    /* 3 images donc 4 x 100% */

   width: 300%;

   height: 300px;

   padding:0; margin:0;

   list-style: none;

}

.slideshow li {

   float: left;

}</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

   $(function(){

      setInterval(function(){

         $(".slideshow ul").animate({marginLeft:-350},800,function(){

            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));

         })

      }, 3500);

   });

</script>

             <li><img src="image1.jpg" alt="" width="350" height="200" /></li>

             <li><img src="image2.jpg" alt="" width="350" height="200" /></li>

             <li><img src="image3.jpg" alt="" width="350" height="200" /></li>            

       </ul>

</div>

Puis le CSS après "slide show, en n'oubliant pas que le code HTML doit être compris entre les balises <style></style>(En marron)

Puis le code javascript qui doit être compris entre les balises

<script type="text/javascript"></script> (En vert)

Pour finir, on édite les images et l'on copie le lien

CODE

<div class="slideshow"><style>

.slideshow {

   width: 300px;

   height: 300px;

   overflow: hidden;

   border: 3px solid #F2F2F2;

}

.slideshow ul {

    /* 3 images donc 4 x 100% */

   width: 300%;

   height: 300px;

   padding:0; margin:0;

   list-style: none;

}

.slideshow li {

   float: left;

}</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

   $(function(){

      setInterval(function(){

         $(".slideshow ul").animate({marginLeft:-350},800,function(){

            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));

         })

      }, 3500);

   });

</script>

<ul>

             <li><img src="http://data.over-blog-kiwi.com/1/30/51/51/20151214/ob_b688b0_essai1.jpg" alt="" width="300" height="300" /></li>

             <li><img src="http://data.over-blog-kiwi.com/1/30/51/51/20151214/ob_925e5d_essai2.jpg" alt="" width="300" height="300" /></li>

             <li><img src="http://data.over-blog-kiwi.com/1/30/51/51/20151214/ob_014b51_essai3.jpg" alt="" width="300" height="300" /></li>            

       </ul>

</div>

RESULTAT

• 
• 
•