Home > Article > Web Front-end > Javascript implements Taobao slideshow advertising display effect_javascript skills

Javascript implements Taobao slideshow advertising display effect_javascript skills

WBOYOriginal: 2016-05-16 16:02:061159browse

The example in this article describes the method of using JavaScript to achieve the display effect of Taobao slideshow ads. Share it with everyone for your reference. The details are as follows:

1. The renderings are as follows:

2. Code part:

JS code part:

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&#63;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 part:

*{ 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 part:

<!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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery remembers username and password to implement automatic login function next time_jqueryNext article：JQuery remembers username and password to implement automatic login function next time_jquery

See more

Javascript implements Taobao slideshow advertising display effect_javascript skills

Related articles