Simple diaporama d'images avec JQuery

Il existe de multiples exemples sur le web pour réaliser un diaporama avec des images en passant par JQuery (avec les mots clés: slide show Jquery). Pour un exemple simple mais fonctionnel rendez vous sur la page de Jon Raasch: A Simple jQuery Slideshow dont le code est sous licence FreeBSD. Exemple d'utilisation avec deux images (voir):

Pour modifier la vitesse de défilement des images il suffit de changer la valeur dans la ligne de code suivante:

setInterval( "slideSwitch()", 1000 );

Simple diaporama d'images avec JQuery (image1.png)

Simple diaporama d'images avec JQuery (image2.png)

Code HTML (veuillez telecharger au préalable le css et le code Javascript sur la page: A Simple jQuery Slideshow):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>

<title>Simple jQuery Slideshow from JonRaasch.com</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 400, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2000 );
});

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>

</head>

<body style="font-family: Arial, Sans-serif, sans;">

<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->

<div id="slideshow">
    <img src="image1.png" alt="Slideshow Image 1" class="active" />
    <img src="image2.png" alt="Slideshow Image 2" />
</div>

<p>For more info visit <a href="http://jonraasch.com/blog/a-simple-jquery-slideshow">http://jonraasch.com/blog/a-simple-jquery-slideshow</a></p>

<p>If you like this script, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=4URDTZYUNPV3J&lc=US&item_name=Jon%20Raasch&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted">make a donation</a>
</p>

</body>
</html>

Recherches associées

Liens	Site
A Simple jQuery Slideshow	jonraasch

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Simple diaporama d'images avec JQuery

Recherches associées

Benjamin

Skills