首页>>Jquery文字>>点击图片弹出层 多图带翻页展示(2017-09-21)

点击图片弹出层 多图带翻页展示

点击图片弹出层 多图带翻页展示

 

XML/HTML Code
  1. <ul class="cd-items cd-container">  
  2.   <li class="cd-item"> <img src="images/g.png" alt="Item Preview"> <a href="index.html#0" class="cd-trigger">点击预览</a> </li>  
  3. </ul>  
  4. <div class="cd-quick-view">  
  5.   <div class="cd-slider-wrapper">  
  6.     <ul class="cd-slider">  
  7.       <li class="selected"><img src="images/g.png" alt="Product 1"></li>  
  8.       <li><img src="images/g2.png" alt="Product 2"></li>  
  9.       <li><img src="images/g3.png" alt="Product 3"></li>  
  10.     </ul>  
  11.     <ul class="cd-slider-navigation">  
  12.       <li><a class="cd-next" href="index.html#0">上一页</a></li>  
  13.       <li><a class="cd-prev" href="index.html#0">下一页</a></li>  
  14.     </ul>  
  15.   </div>  
  16.   <div class="cd-item-info">  
  17.     <h2>新鲜 小黄瓜 迷你黄瓜 水果黄瓜 荷兰黄瓜500g</h2>  
  18.     <p>叶柄稍粗糙,有糙硬毛,长10-16(-20)厘米;叶片宽卵状心形,膜质,长、宽均7-20厘米,两面甚粗糙,被糙硬毛,3-5个角或浅裂,裂片三角形,有齿,有时边缘有缘毛,先端急尖或渐尖,基部弯缺半圆形,宽2-3厘米,深2-2.5厘米,有时基部向后靠合。</p>  
  19.     <ul class="cd-item-action">  
  20.       <li>  
  21.         <button class="add-to-cart">添加到购物车</button>  
  22.       </li>  
  23.       <li><a href="index.html#0">了解更多</a></li>  
  24.     </ul>  
  25.   </div>  
  26.   <a href="index.html#0" class="cd-close">关闭</a> </div>  

 


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