首页>>导航菜单>>多图片展示，翻页，默认每次显示4个图片(2015-06-29)

多图片展示，翻页，默认每次显示4个图片

 js css文件请到演示页面查看

多图片展示，翻页，默认每次显示4个图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="accarousel">  
  2.         <ul>  
  3.             <li>  
  4.                 <a href="" class="stand"><img src="images/stand-1.jpg" alt="Stand"/></a>  
  5.   
  6.                 <div class="detail-panel"><img src="images/panel-1.jpg" alt="Panel"/></div>  
  7.             </li>  
  8.             <li>  
  9.                 <a href="" class="stand"><img src="images/stand-2.jpg" alt="Stand"/></a>  
  10.   
  11.                 <div class="detail-panel"><img src="images/panel-2.jpg" alt="Panel"/></div>  
  12.             </li>  
  13.             <li>  
  14.                 <a href="" class="stand"><img src="images/stand-3.jpg" alt="Stand"/></a>  
  15.   
  16.                 <div class="detail-panel"><img src="images/panel-3.jpg" alt="Panel"/></div>  
  17.             </li>  
  18.             <li>  
  19.                 <a href="" class="stand"><img src="images/stand-4.jpg" alt="Stand"/></a>  
  20.   
  21.                 <div class="detail-panel"><img src="images/panel-4.jpg" alt="Panel"/></div>  
  22.             </li>  
  23.             <li>  
  24.                 <a href="" class="stand"><img src="images/stand-5.jpg" alt="Stand"/></a>  
  25.   
  26.                 <div class="detail-panel"><img src="images/panel-5.jpg" alt="Panel"/></div>  
  27.             </li>  
  28.             <li>  
  29.                 <a href="" class="stand"><img src="images/stand-6.jpg" alt="Stand"/></a>  
  30.   
  31.                 <div class="detail-panel"><img src="images/panel-6.jpg" alt="Panel"/></div>  
  32.             </li>  
  33.             <li>  
  34.                 <a href="" class="stand"><img src="images/stand-7.jpg" alt="Stand"/></a>  
  35.   
  36.                 <div class="detail-panel"><img src="images/panel-7.jpg" alt="Panel"/></div>  
  37.             </li>  
  38.             <li>  
  39.                 <a href="" class="stand"><img src="images/stand-8.jpg" alt="Stand"/></a>  
  40.   
  41.                 <div class="detail-panel"><img src="images/panel-8.jpg" alt="Panel"/></div>  
  42.             </li>  
  43.             <li>  
  44.                 <a href="" class="stand"><img src="images/stand-9.jpg" alt="Stand"/></a>  
  45.   
  46.                 <div class="detail-panel"><img src="images/panel-9.jpg" alt="Panel"/></div>  
  47.             </li>  
  48.             <li>  
  49.                 <a href="" class="stand"><img src="images/stand-10.jpg" alt="Stand"/></a>  
  50.   
  51.                 <div class="detail-panel"><img src="images/panel-10.jpg" alt="Panel"/></div>  
  52.             </li>  
  53.             <li>  
  54.                 <a href="" class="stand"><img src="images/stand-11.jpg" alt="Stand"/></a>  
  55.   
  56.                 <div class="detail-panel"><img src="images/panel-11.jpg" alt="Panel"/></div>  
  57.             </li>  
  58.             <li>  
  59.                 <a href="" class="stand"><img src="images/stand-12.jpg" alt="Stand"/></a>  
  60.   
  61.                 <div class="detail-panel"><img src="images/panel-12.jpg" alt="Panel"/></div>  
  62.             </li>  
  63.         </ul>  
  64.     </div>  

 


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