Rumah > Artikel > hujung hadapan web > JavaScript原生代码实现幻灯片

JavaScript原生代码实现幻灯片

黄舟asal: 2017-11-20 09:48:592540semak imbas

在我们之前的一篇文章中，我们给大家介绍了关于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(&#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>

总结：

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

相关推荐：

JavaScript实现幻灯片的简单实例

JS实现淘宝幻灯片效果的实现方法

php+javascript幻灯片生成代码

Atas ialah kandungan terperinci JavaScript原生代码实现幻灯片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript实现幻灯片的简单实例Artikel seterusnya：45个好用的JavaScript库

Artikel berkaitan

Lihat lagi