JavaScript原生代码实现幻灯片-js教程-PHP中文网

JavaScript原生代码实现幻灯片

黄舟

发布： 2017-11-20 09:48:59

原创

2770人浏览过

在我们之前的一篇文章中，我们给大家介绍了关于javascript实现幻灯片的实例，详细对此大家都有所认识，今天我们继续给大家介绍如何使用javascript原生代码来实现幻灯片的实例。

效果如下：

代码如下：

<!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('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat left 0; 
 left: 0; 
  margin-top: -66px; 
 display: none; 
 } 
 .box #right { 
 width: 76px; 
 height: 112px; 
 background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') 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('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat left -112px; 
 } 
 .box #right:hover { 
 background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') 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>

登录后复制

总结：

本文很简单的就是JavaScript原生代码实现幻灯片的代码，小伙伴们可以仔细的阅读与学习，在你工作需要的时候，你可以用来借鉴一下，有抛砖引玉的效果！

立即学习“Java免费学习笔记（深入）”；