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

2019-11-20 12:36:19

字体：大中小

来源：转载

供稿：网友

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

一、效果图如下：

二、代码部分：

JS代码部分：

function getClass(oParent,name){   var arr=[];   var oBj=oParent.getElementsByTagName("*");   for(var i=0;i<oBj.length;i++){     if(oBj[i].className==name){       arr.push(oBj[i]);     }   }   return arr; } function startmove(obj,json,fnEnd){   var cur=0;   clearInterval(obj.timer);   obj.timer=setInterval(function(){     var oStop=true;     for(var attr in json){       if(attr=='opacity'){         cur=Math.round(parseFloat(getStyle(obj,attr)*100));       }else{         cur=parseInt(getStyle(obj,attr));       }       var speed=(json[attr]-cur)/10;       speed=speed>0?Math.ceil(speed):Math.floor(speed);       if(cur!=json[attr]){         oStop=false;       }       if(attr=='opacity'){         obj.style[attr]=(cur+speed)/100;         obj.style.filter="alpha(opacity:"+cur+speed+")";       }else{         obj.style[attr]=cur+speed+"px";       }     }     if(oStop){       clearInterval(obj.timer);       if(fnEnd)fnEnd();     }   },30);  }; function getStyle(obj,name){   if(obj.currentStyle){     return obj.currentStyle[name];   }else{    return getComputedStyle(obj,false)[name];   }};

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部分：

<!DOCTYPE html> <html> <head lang="en">   <meta charset="UTF-8">   <title></title>   <link href="css.css" rel="stylesheet" type="text/css">   <script src="myscript.js"></script>   <script>     window.onload=function() {       var now = 0;       var oDiv = document.getElementById('div1');       var oOl = oDiv.getElementsByTagName('ol')[0];       var oLi = oOl.getElementsByTagName('li');       var oUl = getClass(oDiv, 'pic_body')[0];       for(var i=0;i<oLi.length;i++){         oLi[i].index=i;         oLi[i].onclick=function(){           now=this.index;           tab();         };       }       function tab(){         for(var i=0;i<oLi.length;i++){           oLi[i].className='';         }         oLi[now].className='active';         startmove(oUl,{top:-150*now});       };       function next(){         now++;         if(now==oLi.length){           now=0;         }         tab();       };       var timer=setInterval(next,3000);       oUl.onmouseover=function(){         clearInterval(timer);       };       oUl.onmouseout=function(){         timer=setInterval(next,3000);       };     }   </script> </head> <body> <div id="div1">   <ol>     <li class="active">1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li>   </ol>   <ul class="pic_body">     <li><img src="image/1.jpg"></li>     <li><img src="image/2.jpg"></li>     <li><img src="image/3.jpg"></li>     <li><img src="image/4.jpg"></li>     <li><img src="image/5.jpg"></li>   </ul> </div> </body> </html>

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

上一篇：原生js和jQuery写的网页选项卡特效对比

下一篇：jquery实现标签上移、下移、置顶