图片组浏览,三种不同的效果,自动播放的图片浏览

图片组浏览,三种不同的效果,自动播放的图片浏览

 

演示

 

 

XML/HTML Code

1. <table style="width: 100%; margin: 0 auto;" cellpadding="0px" cellspacing="0px">  
2.     <tr>  
3.         <td>  
4.             <!-- Start VisualLightBox.com BODY section id=1 -->  
5.             <div id="vlightbox1">  
6.             <a class="vlightbox1" href="images/demo/main_demo/part1/data/images1/image_lightbox.jpg" title="Image Lightbox"><img src="images/demo/main_demo/part1/data/thumbnails1/image_lightbox.jpg" alt="Image Lightbox"/>Image Lightbox</a>  
7.             <a class="vlightbox1" href="images/demo/main_demo/part1/data/images1/jquery_lightbox.jpg" title="Lightbox features"><img src="images/demo/main_demo/part1/data/thumbnails1/jquery_lightbox.jpg" alt="Lightbox features"/>Lightbox features</a>  
8.             <a class="vlb" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.3</a>  
9.             </div>  
10.             <script src="images/demo/main_demo/part1/engine/js/thumbscript1.js" type="text/javascript"></script>  
11.             <script src="images/demo/main_demo/part1/engine/js/vlbdata1.js" type="text/javascript"></script>  
12.             <!-- End VisualLightBox.com BODY section -->  
13.         </td>  
14.         <td>  
15.             <!-- Start VisualLightBox.com BODY section id=2 -->  
16.             <div id="vlightbox2">  
17.             <a class="vlightbox2" href="images/demo/main_demo/part2/data/images2/lightbox_zoom.jpg" title="Lightbox themes"><img src="images/demo/main_demo/part2/data/thumbnails2/lightbox_zoom.png" alt="Lightbox themes"/>Lightbox themes</a>  
18.             <a class="vlightbox2" href="images/demo/main_demo/part2/data/images2/lightbox_slideshow.jpg" title="Lightbox wizard"><img src="images/demo/main_demo/part2/data/thumbnails2/lightbox_slideshow.png" alt="Lightbox wizard"/>Lightbox wizard</a>  
19.             <a class="vlb" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.3</a>  
20.             </div>  
21.             <script src="images/demo/main_demo/part2/engine/js/vlbdata2.js" type="text/javascript"></script>  
22.             <!-- End VisualLightBox.com BODY section -->  
23.         </td>  
24.         <td>  
25.             <!-- Start VisualLightBox.com BODY section id=3 -->  
26.             <div id="vlightbox3">  
27.             <a class="vlightbox3" href="images/demo/main_demo/part3/data/images3/lightbox_effect.jpg" title="Lightbox effect"><img src="images/demo/main_demo/part3/data/thumbnails3/lightbox_effect.jpg" alt="Lightbox effect"/></a>  
28.             <a class="vlightbox3" href="images/demo/main_demo/part3/data/images3/lightbox_window.jpg" title="Lightbox zoom"><img src="images/demo/main_demo/part3/data/thumbnails3/lightbox_window.jpg" alt="Lightbox zoom"/></a>  
29.             <a class="vlb" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.3</a>  
30.             </div>  
31.             <script src="images/demo/main_demo/part3/engine/js/thumbscript3.js" type="text/javascript"></script>  
32.             <script src="images/demo/main_demo/part3/engine/js/vlbdata3.js" type="text/javascript"></script>  
33.             <!-- End VisualLightBox.com BODY section -->  
34.         </td>  
35.     </tr>  
36. </table>          

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_247.html