首页>>Jquery图片>>jQuery商城商品图片展示 多图，鼠标经过显示大图，分不同颜色型号等(2017-11-07)

jQuery商城商品图片展示 多图，鼠标经过显示大图，分不同颜色型号等

jQuery商城商品图片展示 多图，鼠标经过显示大图，分不同颜色型号等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="Xcontent">  
  2.     <ul class="Xcontent01">  
  3.         <div class="Xcontent06"><img src="images/shangpinxiangqing/X1.png"></div>  
  4.         <ol class="Xcontent08">  
  5.             <div class="Xcontent07"><img src="images/shangpinxiangqing/X1.png"></div>  
  6.             <div class="Xcontent09"><img src="images/shangpinxiangqing/X7.png"></div>  
  7.             <div class="Xcontent10"><img src="images/shangpinxiangqing/X8.png"></div>  
  8.             <div class="Xcontent11"><img src="images/shangpinxiangqing/X9.png"></div>  
  9.             <div class="Xcontent12"><img src="images/shangpinxiangqing/X10.png"></div>  
  10.         </ol>  
  11.         <ol class="Xcontent13">  
  12.             <div class="Xcontent14"><a href="#"><p>新物品</p></a></div>  
  13.             <div class="Xcontent15"><img src="images/shangpinxiangqing/X11.png"></div>  
  14.             <div class="Xcontent16"><p>充电5分钟，温暖2小时</p></div>  
  15.             <div class="Xcontent17">  
  16.                 <p class="Xcontent18">售价</p>  
  17.                 <p class="Xcontent19">￥<span>69.00</span></p>  
  18.                 <div class="Xcontent20">  
  19.                     <p class="Xcontent21">促销</p>  
  20.                     <img src="images/shangpinxiangqing/X12.png">  
  21.                     <p class="Xcontent22">领610元新年礼券，满再赠好礼</p>  
  22.                 </div>  
  23.                 <div class="Xcontent23">  
  24.                     <p class="Xcontent24">服务</p>  
  25.                     <p class="Xcontent25">30天无忧退货           48小时快速退款             满88元免邮</p>  
  26.                 </div>  
  27.                   
  28.             </div>  
  29.             <div class="Xcontent26">  
  30.                 <p class="Xcontent27">颜色</p>  
  31.                 <div class="Xcontent28"><img  src="images/shangpinxiangqing/X14.png"></div>  
  32.                     <div class="Xcontent29"><img  src="images/shangpinxiangqing/X1.png"></div>  
  33.             </div>  
  34.             <div class="Xcontent30">  
  35.                 <p class="Xcontent31">数量</p>  
  36.                 <div class="Xcontent32"><img src="images/shangpinxiangqing/X15.png"></div>  
  37.                 <form><input class="input" value="1"></form>  
  38.                 <div class="Xcontent33"><img src="images/shangpinxiangqing/16.png"></div>  
  39.             </div>  
  40.             <div class="Xcontent34"><a href="#"><img src="images/shangpinxiangqing/X17.png"></a></div>  
  41.             <div class="Xcontent35"><a href="#"><img src="images/shangpinxiangqing/X18.png"></a></div>  
  42.         </ol>  
  43.     </ul>  
  44. </div>  

 


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