Page d'album de...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

Page d'album de diaporama jQuery

Puisque nous créons un effet d'album diaporama, les images sont définitivement indispensables, nous devons donc d'abord mettre les images dans la page. Le code est le suivant : <🎜. >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简约jQuery幻灯片相册代码</title>
</head>
<body>
<div id="msg_slideshow" class="msg_slideshow" style="margin:0 auto">
    <div id="msg_wrapper" class="msg_wrapper">
    </div>
    <div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
 <a href="#" id="msg_grid" class="msg_grid"></a>
        <a href="#" id="msg_prev" class="msg_prev"></a>
        <a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
 <a href="#" id="msg_next" class="msg_next"></a>
    </div>
    <div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
 <div class="msg_thumb_wrapper">
            <a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg"/></a>
            <a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg"/></a>
            <a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg"/></a>
            <a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg"/></a>
            <a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg"/></a>
            <a href="#"><img src="images/thumbs/6.jpg" alt="images/6.jpg"/></a>
        </div>
        <div class="msg_thumb_wrapper" style="display:none;">
            <a href="#"><img src="images/thumbs/7.jpg" alt="images/7.jpg"/></a>
            <a href="#"><img src="images/thumbs/8.jpg" alt="images/8.jpg"/></a>
            <a href="#"><img src="images/thumbs/9.jpg" alt="images/9.jpg"/></a>
            <a href="#"><img src="images/thumbs/10.jpg" alt="images/10.jpg"/></a>
            <a href="#"><img src="images/thumbs/11.jpg" alt="images/11.jpg"/></a>
            <a href="#"><img src="images/thumbs/12.jpg" alt="images/12.jpg"/></a>
        </div>
        <a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
        <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
        <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
        <span class="msg_loading"></span><!-- show when next thumb wrapper loading -->
 </div>
</div>
</body>
</html>

Mettons l'image sur la page et ajoutons notre bibliothèque JQ

<script src="//cdn.bootcss.com/jquery/1.8.2/jquery .min.js"></script>

Mettez-le dans la balise head

Le code est le suivant 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简约jQuery幻灯片相册代码</title>
    <script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="msg_slideshow" class="msg_slideshow" style="margin:0 auto">
    <div id="msg_wrapper" class="msg_wrapper">
    </div>
    <div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
 <a href="#" id="msg_grid" class="msg_grid"></a>
        <a href="#" id="msg_prev" class="msg_prev"></a>
        <a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
 <a href="#" id="msg_next" class="msg_next"></a>
    </div>
    <div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
 <div class="msg_thumb_wrapper">
            <a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg"/></a>
            <a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg"/></a>
            <a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg"/></a>
            <a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg"/></a>
            <a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg"/></a>
            <a href="#"><img src="images/thumbs/6.jpg" alt="images/6.jpg"/></a>
        </div>
        <div class="msg_thumb_wrapper" style="display:none;">
            <a href="#"><img src="images/thumbs/7.jpg" alt="images/7.jpg"/></a>
            <a href="#"><img src="images/thumbs/8.jpg" alt="images/8.jpg"/></a>
            <a href="#"><img src="images/thumbs/9.jpg" alt="images/9.jpg"/></a>
            <a href="#"><img src="images/thumbs/10.jpg" alt="images/10.jpg"/></a>
            <a href="#"><img src="images/thumbs/11.jpg" alt="images/11.jpg"/></a>
            <a href="#"><img src="images/thumbs/12.jpg" alt="images/12.jpg"/></a>
        </div>
        <a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
        <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
        <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
        <span class="msg_loading"></span><!-- show when next thumb wrapper loading -->
 </div>
</div>
</body>
</html>

Astuce : Remplacez l'image ci-dessus par votre image locale

Ce qui suit est le style CSS de notre page





section suivante

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery幻灯片相册</title> </head> <body> <h1>jQuery幻灯片相册放映</h1> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel