既然我們是做幻燈片放映相簿的效果，圖片肯定是少不了了的，所以我們要先把圖片放到頁面中去，代碼如下：
<!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>
我們把圖片放到頁面中好，在加入我們的JQ庫
<script src="//cdn.bootcss.com/jquery/1.8. 2/jquery.min.js"></script>
放到head標籤裡面
程式碼如下
<!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>###提示：將上面的圖片換成你本地的圖片######下面是給我們的頁面做CSS樣式############## ############################ ###下一節
