简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Nativer JavaScript-Code zur Implementierung einer Diashow

Nativer JavaScript-Code zur Implementierung einer Diashow

黄舟
黄舟Original
2017-11-20 09:48:592543Durchsuche

In unserem vorherigen Artikel haben wir Ihnen ein Beispiel für die Implementierung einer Diashow mit JavaScript vorgestellt. Heute stellen wir Ihnen die Nutzung von JavaScript Nativer Code zur Implementierung von Diashow-Beispielen.

Der Effekt ist wie folgt:

Der Code ist wie folgt: 

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <style type = "text/css"> 
 *{ padding: 0; margin: 0; } 
 li { list-style: none; } 
 .box { 
 width: 800px; 
 height: 450px; 
 margin: 50px auto; 
 position: relative; 
  overflow:hidden; 
 } 
 .box span { 
 width: 40px; 
 height: 60px;  
 display: block; 
 position: absolute; 
 top: 225px; 
 margin-top: -20px; 
 cursor: pointer; 
 z-index: 1; 
 } 
 .box #left { 
 width: 76px; 
 height: 112px; 
 background: url(&#39;http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png&#39;) no-repeat left 0; 
 left: 0; 
  margin-top: -66px; 
 display: none; 
 } 
 .box #right { 
 width: 76px; 
 height: 112px; 
 background: url(&#39;http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png&#39;) no-repeat right 0; 
 right: 0; 
  margin-top: -66px; 
 display: none; 
 } 
 .box #txt { 
 width: 100%; 
 height: 30px; 
 background-color: #000; 
 opacity: 0.4; 
 position: absolute; 
 bottom: 0; 
 color: #fff; 
 line-height: 30px; 
 text-align: center; 
 } 
 #ad { 
 width: 4000px; 
 height: 450px; 
 position: absolute; 
 left: -1600px; 
 } 
 #ad li { 
 float: left; 
 } 
  .box #left:hover { 
 background: url(&#39;http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png&#39;) no-repeat left -112px; 
 } 
 .box #right:hover { 
 background: url(&#39;http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png&#39;) no-repeat right -112px; 
 } 
 </style> 
 <script type = "text/javascript"> 
 window.onload = function(){ 
 function $(id){ return document.getElementById(id);} 
 var aLi = $("ad").children; 
 function animate(obj,target,arrt){ 
  //关闭上一个定时器 
  clearInterval(obj.timer); 
  $("txt").innerHTML = obj.children[0].children[0].alt; 
 
  //管理定时器 
  obj.timer = setInterval(function(){ 
 //移动步长 
  var step = (target - obj.offsetLeft) / 10; 
  //步长取整 
  step = step > 0? Math.ceil(step):Math.floor(step); 
  //移动盒子 ： 盒子位置 + 步长 
  obj.style.left = obj.offsetLeft + step+ "px"; 
  //关闭定时器 
  if(obj.offsetLeft%800 ==0){ 
  clearInterval(obj.timer); 
  //判断点击的方向 
  if(arrt === "left"){ 
  var oLi = $("ad").children[aLi.length - 1].cloneNode(true); 
  //添加到最前面 
  obj.insertBefore(oLi,obj.children[0]); 
  //删除最后一个盒子 
  obj.removeChild(obj.children[aLi.length - 1]); 
  //让ul恢复初始值 
  obj.style.left = "-1600px"; 
 }else{ 
  //克隆第一个盒子 
  var oLi = obj.children[0].cloneNode(true); 
  //添加到最后面 
  obj.appendChild(oLi); 
  //删除第一个盒子 
  obj.removeChild(obj.children[0]); 
  //让ul恢复初始值 
  obj.style.left = "-1600px"; 
 } 
 } 
  },20); 
 } 
 var timer = setInterval(autoplay,2000); 
 function autoplay(){ 
  animate($("ad"),-2400,"right"); 
 } 
 $("ad").parentNode.onmouseover = function(){ 
 clearInterval(timer); 
 $("left").style.display = "block"; 
  $("right").style.display = "block"; 
 } 
 $("ad").parentNode.onmouseout = function(){ 
  $("left").style.display = "none"; 
  $("right").style.display = "none"; 
  timer = setInterval(autoplay,2000); 
 } 
 $("left").onclick = function(){ 
  clearInterval(timer); 
  animate($("ad"),-800,"left"); 
 } 
 $("right").onclick = function(){ 
  clearInterval(timer); 
  animate($("ad"),-2400,"right"); 
 } 
 } 
 </script> 
 </head> 
 <body> 
 <p>  
 <ul id="ad"> 
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/4.jpg" alt="闲静似娇花照水，行动如弱柳扶风。"></li> 
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/5.jpg" alt="心较比干多一窍，病如西子胜三分。"></li> 
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/1.jpg" alt="两弯似蹙非蹙笼烟眉，一双似喜非喜含情目。"></li> 
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/2.jpg" alt="态生两靥之愁，娇袭一身之病。"></li> 
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/3.jpg" alt="泪光点点，娇喘微微。"></li> 
 </ul> 
 <p id="txt">泪光点点，娇喘微微</p> 
 <span id="left"></span> 
 <span id="right"></span> 
 </p> 
 </body> 
</html>

Zusammenfassung:

Dieser Artikel ist ein sehr einfacher nativer JavaScript-Code zum Implementieren des Codes der Diashow, den Freunde sorgfältig lesen und studieren können Finden Sie heraus, was Sie für Ihre Arbeit benötigen. Manchmal können Sie es als Referenz verwenden, was den Effekt hat, andere zu inspirieren!

Verwandte Empfehlungen:

Ein einfaches Beispiel für die JavaScript-Implementierung einer Diashow

JS-Implementierungsmethode des Taobao-Diashow-Effekts

PHP+Javascript-Diashow-Generierungscode

Das obige ist der detaillierte Inhalt vonNativer JavaScript-Code zur Implementierung einer Diashow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein einfaches Beispiel für die Verwendung von JavaScript zur Implementierung einer DiashowNächster Artikel：Ein einfaches Beispiel für die Verwendung von JavaScript zur Implementierung einer Diashow

In Verbindung stehende Artikel

Mehr sehen