Detaillierte Erläuterung, wie JavaScript die Werbeeffekte für Taobao-Produkte implementiert-js-Tutorial-php.cn

Detaillierte Erläuterung, wie JavaScript die Werbeeffekte für Taobao-Produkte implementiert

黄舟

Freigeben： 2017-08-11 10:48:20

Original

1759 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Wirkung von Taobao-Produktwerbung auf Basis von JavaScript im Detail vorgestellt. Interessierte Freunde können sich darauf beziehen.

Das Beispiel in diesem Artikel teilt allen die Implementierung von Taobao mit JavaScript. Der spezifische Code für den Produktwerbeeffekt dient als Referenz. Der spezifische Inhalt lautet wie folgt:

HTML-Teil:

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 }

Nach dem Login kopieren

JS-Teil:

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

Nach dem Login kopieren

Vorschaueffekt :

window.onload = function(){ 
  var op = document.getElementById(&#39;ad&#39;); 
  var aUl = op.getElementsByTagName(&#39;ul&#39;); 
  var oImg = op.getElementsByTagName(&#39;img&#39;)[0]; 
  var aImg = [&#39;images/pic1.jpg&#39;,&#39;images/pic2.jpg&#39;,&#39;images/pic3.jpg&#39;,&#39;images/pic4.jpg&#39;,&#39;images/pic5.png&#39;,&#39;images/pic6.png&#39;,&#39;images/pic7.png&#39;,&#39;images/pic8.png&#39;,&#39;images/pic1.jpg&#39;,&#39;images/pic2.jpg&#39;,&#39;images/pic3.jpg&#39;,&#39;images/pic4.jpg&#39;,&#39;images/pic5.png&#39;,&#39;images/pic6.png&#39;]; 
  var aTxt = [&#39;连衣裙&#39;,&#39;T恤&#39;,&#39;雪纺&#39;,&#39;铅笔裤&#39;,&#39;婚纱&#39;,&#39;外套&#39;,&#39;连体裤&#39;,&#39;包包&#39;,&#39;凉鞋&#39;,&#39;单鞋&#39;,&#39;太阳镜&#39;,&#39;丝袜&#39;,&#39;帆布鞋&#39;,&#39;情侣鞋&#39;]; 
  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); 
  }; 
  };

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie JavaScript die Werbeeffekte für Taobao-Produkte implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!