首页>>焦点图>>轻量级的slide效果，支持多图滚动(2016-08-21)

轻量级的slide效果，支持多图滚动

 支持多图滚动，支持同一页面展示多次，支持缩略图

轻量级的slide效果，支持多图滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo">  
  2.         <div class="item">              
  3.             <div class="clearfix" style="max-width:474px;">  
  4.                 <ul id="image-gallery" class="gallery list-unstyled cS-hidden">  
  5.                     <li data-thumb="img/thumb/cS-1.jpg">   
  6.                         <img src="img/cS-1.jpg" />  
  7.                          </li>  
  8.                     <li data-thumb="img/thumb/cS-2.jpg">   
  9.                         <img src="img/cS-2.jpg" />  
  10.                          </li>  
  11.                     <li data-thumb="img/thumb/cS-3.jpg">   
  12.                         <img src="img/cS-3.jpg" />  
  13.                          </li>  
  14.                     <li data-thumb="img/thumb/cS-4.jpg">   
  15.                         <img src="img/cS-4.jpg" />  
  16.                          </li>  
  17.                     <li data-thumb="img/thumb/cS-5.jpg">   
  18.                         <img src="img/cS-5.jpg" />  
  19.                          </li>  
  20.                     <li data-thumb="img/thumb/cS-6.jpg">   
  21.                         <img src="img/cS-6.jpg" />  
  22.                          </li>  
  23.                     <li data-thumb="img/thumb/cS-7.jpg">   
  24.                         <img src="img/cS-7.jpg" />  
  25.                          </li>  
  26.                     <li data-thumb="img/thumb/cS-8.jpg">   
  27.                         <img src="img/cS-8.jpg" />  
  28.                          </li>  
  29.                     <li data-thumb="img/thumb/cS-9.jpg">   
  30.                         <img src="img/cS-9.jpg" />  
  31.                          </li>  
  32.                     <li data-thumb="img/thumb/cS-10.jpg">   
  33.                         <img src="img/cS-10.jpg" />  
  34.                          </li>  
  35.                     <li data-thumb="img/thumb/cS-11.jpg">   
  36.                         <img src="img/cS-11.jpg" />  
  37.                          </li>  
  38.                     <li data-thumb="img/thumb/cS-12.jpg">   
  39.                         <img src="img/cS-12.jpg" />  
  40.                          </li>  
  41.                     <li data-thumb="img/thumb/cS-13.jpg">   
  42.                         <img src="img/cS-13.jpg" />  
  43.                          </li>  
  44.                     <li data-thumb="img/thumb/cS-14.jpg">   
  45.                         <img src="img/cS-14.jpg" />  
  46.                          </li>  
  47.                     <li data-thumb="img/thumb/cS-15.jpg">   
  48.                         <img src="img/cS-15.jpg" />  
  49.                          </li>  
  50.                 </ul>  
  51.             </div>  
  52.         </div>  
  53.         <div class="item">  
  54.             <ul id="content-slider" class="content-slider">  
  55.                 <li>  
  56.                     <h3>1</h3>  
  57.                 </li>  
  58.                 <li>  
  59.                     <h3>2</h3>  
  60.                 </li>  
  61.                 <li>  
  62.                     <h3>3</h3>  
  63.                 </li>  
  64.                 <li>  
  65.                     <h3>4</h3>  
  66.                 </li>  
  67.                 <li>  
  68.                     <h3>5</h3>  
  69.                 </li>  
  70.                 <li>  
  71.                     <h3>6</h3>  
  72.                 </li>  
  73.             </ul>  
  74.         </div>  
  75.   
  76.     </div>    

 


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