当前位置:Gxlcms > JavaScript > javascript实现淘宝幻灯片广告展示效果_javascript技巧

javascript实现淘宝幻灯片广告展示效果_javascript技巧

时间:2021-07-01 10:21:17 帮助过:6人阅读

本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法。分享给大家供大家参考。具体如下:

一、效果图如下:

二、代码部分:

JS代码部分:

CSS部分:

*{ margin: 0px; padding: 0px; } 
img{ 
border: none; width: 470px; height: 150px;
float: left;
} 
.pic_body li{
width: 470px; height: 150px;
float: left; z-index: 3001; } 
ul{
 list-style: none; position: absolute; top: 0px; left: 0px;
 width: 470px; height: 150px; background: yellow; z-index: 3000;
} 
#div1{ border: 1px solid black; width: 470px; height: 150px;
 position: relative; margin: 100px auto; padding: 0px;
 overflow: hidden;
} 
#div1 ol{ bottom: 10px; right: 10px; 
position: absolute; z-index: 9999; 
} 
ol li{ background: yellow; float: left; 
display: inline; margin-right: 3px; padding: 3px 4px;
position: relative; top: 0px; left: 0px;
font-family: arial; font-size: 12px;
cursor: pointer; filter: alpha(opacity:60); opacity: 0.6;
border: 1px solid black;
} 
.active{ background: yellow; font-weight: bolder;
padding: 4px 6px; filter: alpha(opacity:100); opacity: 1;
} 

HTML部分:

 
 
 
   
   
   
  

希望本文所述对大家的javascript程序设计有所帮助。

人气教程排行