基于Java脚本语言实现淘宝商品广告效果

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

半铸钢钢性铸铁(铸造半钢)部分：

ul { margin : 0；padd : 0；}李{列表式：无；} # ad { width: 298px高度： 208像素；border: 1px #ff6300固体；padding: 4px 1px文本对齐：中心；} #ad .listL { float: left} #ad .列表{右侧浮动right } # ad li {宽度： 48px高度： 26pxborder: 1px #ffadad固体；背景： # fff7f7color: # 333线高： 26px边距-底部： 2px光标：指针；} # ad img { height: 206px宽度： 188像素；背景： URL(图片/loader _ ico。gif)无重复中心中心；} #ad .cur { background : # ff 8494 color : # fff } HTML部分：

div id='ad' ul class='listL '！-Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li-/ul a href=' # ' img src=' http : ' alt=' '/a ul class=' listR '！-李/李莉/李莉/李莉/李莉/李莉/李莉/李莉/李莉-/ul/div JS部分：

窗户。onload=function(){ var Odiv=document。getelementbyid(' ad ')；var AuL=Odiv。GetElementsBytagname(' ul ')；var oImg=odiv。getelementsbytagname(' img ')[0]；var aImg=['images/pic1.jpg '，' images/pic2.jpg '，' images/pic3.jpg '，' images/pic4.jpg '，' images/pic5.png '，' images/pic6.png '，' images/pic8.png '，' images/pic1.jpg '，' images/pic2.jpg '，' images/pic3.jpg '，' images/pic4.jpg '，' images/pic5.png '，' images/pic6。png ']；var aTxt=['连衣裙，' T恤','雪纺','铅笔裤','婚纱','外套','连体裤','包包','凉鞋','单鞋','太阳镜','丝袜','帆布鞋','情侣鞋'];var len=AimG . length var oldNum=0；var num=0；定义变量计时器=null变化速度=1;//创建添加左右两侧里为(var I=0；I len/2；i ){ aUl[0].innerHTML=' Li ' ATxt[I]'/Li ' AuL[1].innerHTML=' Li ' ATxt[I len/2]'/Li ' } var ALil=AuL[0].getElementsByTagName(' Li ')；var aLiR=aUl[1].getElementsByTagName(' Li ')；var arrLi=[]；//将遍历的所有里添加到数组arrLi中for(var I=0；i aLiL.lengthI){ arrli。push(AliL[I])；} for(var I=0；I AliR . LengTii){ arr Li。push(AliR[I])；}//控制台。日志(arrli。长度)；//函数初始化函数init(n){ oimg。src=AImg[n]；arrLi[oldNum].类名=arrLi[n].类名=' curold num=n；} init(0)；//鼠标经过李，图片切换for(var I=0；我透镜；我)。索引=我；arrLi[i].onmouseover=function(){ init(this。索引)；} };//定时切换函数fnTimer(n){ timer=setInterval(函数(){ //type1:顺序切换/* n；if(n==len){ n=0；}*///type2:倒序切换if(n==len-1){ speed=-1；} else if(n==0){ speed=1；} n=速度；init(n)；},1000);};fnTimer(0)；//鼠标移入，清除定时器奥迪夫。onmouseover=function(){ clearInterval(定时器);};//鼠标移出，开启定时器奥迪夫。onmouseout=function(){ fnTimer(oldNum)；};};预览效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。