3D相册展示，css和jquery

3D相册展示，css和jquery

 

演示

•  

 

 

XML/HTML Code

1. <div class="container">  
2.   
3.         <section id="dg-container" class="dg-container">  
4.             <div class="dg-wrapper">  
5.                 <a href="#"><img src="images/1.jpg" alt="image01"><div></div></a>  
6.                 <a href="#"><img src="images/2.jpg" alt="image02"><div></div></a>  
7.                 <a href="#"><img src="images/3.jpg" alt="image03"><div></div></a>  
8.                 <a href="#"><img src="images/4.jpg" alt="image04"><div></div></a>  
9.                 <a href="#"><img src="images/5.jpg" alt="image05"><div></div></a>  
10.                 <a href="#"><img src="images/6.jpg" alt="image06"><div></div></a>  
11.                 <a href="#"><img src="images/7.jpg" alt="image07"><div></div></a>  
12.                 <a href="#"><img src="images/8.jpg" alt="image08"><div></div></a>  
13.                 <a href="#"><img src="images/9.jpg" alt="image09"><div></div></a>  
14.                 <a href="#"><img src="images/10.jpg" alt="image10"><div></div></a>  
15.                 <a href="#"><img src="images/11.jpg" alt="image11"><div></div></a>  
16.                 <a href="#"><img src="images/12.jpg" alt="image12"><div></div></a>  
17.             </div>  
18.             <nav>     
19.                 <span class="dg-prev"><</span>  
20.                 <span class="dg-next">></span>  
21.             </nav>  
22.         </section>  
23.        </div>  
24.     <script src="../../js/jquery-1.9.1.min.js"></script>  
25.     <script type="text/javascript" src="js/jquery.gallery.js"></script>  
26.     <script type="text/javascript">  
27.         $(function() {  
28.             $('#dg-container').gallery();  
29.         });  
30.     </script/>  

 

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