点击图片弹出层多图带翻页展示-freejs.net代码演示

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

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

XML/HTML Code

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