recherche

Maison  >  Article  >  interface Web  >  Code natif JavaScript pour implémenter le diaporama

Code natif JavaScript pour implémenter le diaporama

黄舟
黄舟original
2017-11-20 09:48:592561parcourir

Dans notre article précédent, nous vous avons présenté un exemple de mise en œuvre d'un diaporama utilisant JavaScript. Tout le monde le sait en détail. Aujourd'hui, nous allons continuer à vous présenter comment Utiliser JavaScript code natif pour implémenter des exemples de diaporamas.

L'effet est le suivant :

Le code est le suivant : 

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

Résumé :

Cet article est très simplement le code natif JavaScript pour implémenter le code du diaporama. Les amis peuvent le lire et l'étudier attentivement pour. découvrez ce dont vous avez besoin pour votre travail. Parfois, vous pouvez l'utiliser comme référence, ce qui a pour effet d'inspirer les autres !

Recommandations associées :

Un exemple simple d'implémentation JavaScript d'un diaporama

Méthode d'implémentation JS de l'effet de diaporama Taobao

code de génération de diaporama php+javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un exemple simple d'utilisation de JavaScript pour implémenter un diaporamaArticle suivant：Un exemple simple d'utilisation de JavaScript pour implémenter un diaporama

Articles Liés

Voir plus