Detailed explanation of how JavaScript implements Taobao product advertising effects

This article mainly introduces in detail the effect of Taobao product advertising based on JavaScript. It has certain reference value. Interested friends can refer to it.

The example in this article shares with everyone the implementation of Taobao using JavaScript. The specific code for the product advertising effect is for your reference. The specific content is as follows

CSS part:

##

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

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

window.onload = function(){ 
  var op = document.getElementById('ad'); 
  var aUl = op.getElementsByTagName('ul'); 
  var oImg = op.getElementsByTagName('img')[0]; 
  var aImg = ['images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.png','images/pic6.png','images/pic7.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; 
  var timer = null; 
  var speed = 1; 
 
  // 创建添加左右两侧li 
  for( var i = 0; i < len/2; i++){ 
   aUl[0].innerHTML += &#39;<li>&#39;+ aTxt[i] +&#39;</li>&#39; 
   aUl[1].innerHTML += &#39;<li>&#39;+ aTxt[i + len/2] +&#39;</li>&#39; 
  } 
 
  var aLiL = aUl[0].getElementsByTagName(&#39;li&#39;); 
  var aLiR = aUl[1].getElementsByTagName(&#39;li&#39;); 
  var arrLi = []; 
  // 将遍历的所有li添加到数组arrLi中 
  for( var i = 0; i < aLiL.length; i++){ 
   arrLi.push(aLiL[i]); 
  } 
  for( var i = 0; i < aLiR.length; i++){ 
   arrLi.push(aLiR[i]); 
  } 
  // console.log(arrLi.length); 
 
  // 函数初始化 
  function init(n){ 
   oImg.src = aImg[n]; 
   arrLi[oldNum].className = &#39;&#39;; 
   arrLi[n].className = &#39;cur&#39;; 
   oldNum = n; 
  } 
  init(0); 
 
  // 鼠标经过li，图片切换 
  for(var i = 0; i < len; i++){ 
   arrLi[i].index = i; 
   arrLi[i].onmouseover = function(){ 
    init(this.index); 
   } 
  }; 
 
  // 定时切换 
  function fnTimer(n){ 
   timer = setInterval(function(){ 
     
    // type1:顺序切换 
    /* n ++; 
    if(n == len){ 
     n = 0; 
    }*/ 
 
    // type2：倒序切换 
    if(n == len-1){ 
     speed = -1; 
    }else if(n== 0){ 
     speed = 1; 
    } 
    n += speed; 
    init(n); 
   },1000); 
  }; 
  fnTimer(0); 
 
  // 鼠标移入，清除定时器 
  op.onmouseover = function(){ 
   clearInterval(timer); 
  }; 
 
  // 鼠标移出，开启定时器 
  op.onmouseout = function(){ 
   fnTimer(oldNum); 
  }; 
  };

Preview effect:

The above is the detailed content of Detailed explanation of how JavaScript implements Taobao product advertising effects. For more information, please follow other related articles on the PHP Chinese website!