JavaScript如何实现淘宝商品广告效果的实例详解

来源：亿欧教育网

这篇文章主要为大家详细介绍了基于JavaScript实现淘宝商品广告效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码，供大家参考，具体内容如下

CSS部分：

ul{ margin: 0; padding: 0; } 
 li{ list-style: none; } 
 
 #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; } 
 #ad .listL{ float: left; } 
 #ad .listR{ float: right; } 
 #ad li{ width: 48px; height: 26px; border: 1px #ffadad solid; background: #fff7f7; color: #333; line-height: 26px; margin-bottom: 2px; cursor: pointer; } 
 #ad img{ height: 206px; width: 188px; background: url(images/loader_ico.gif) no-repeat center center; } 
 #ad .cur{ background: #ff8494; color: #fff }

HTML部分：

<p id="ad"> 
 <ul class="listL"> 
 <!-- <li class="cur"></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> --> 
 </ul> 
 <a href="#"><img src="" alt=""></a> 
 <ul class="listR"> 
 <!-- <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> --> 
 </ul> 
 </p>

JS部分：

预览效果：

显示全文

全部频道

JavaScript如何实现淘宝商品广告效果的实例详解