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

jQuery slideshow album page

Since we are making a slide show album effect, pictures are definitely indispensable, so we need to put the pictures into the page first. The code is as follows: 

<!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>

Let’s put the image on the page and add it to our JQ library

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

Put it in the head tag

##The code is as follows

<!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>

Tips: Replace the above image with your local image

The following is the CSS style for our page





Next Section

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery幻灯片相册</title> </head> <body> <h1>jQuery幻灯片相册放映</h1> </body> </html>
submitReset Code
ChapterCourseware