Home > Article > Web Front-end > JavaScript native code to implement slideshow

JavaScript native code to implement slideshow

黄舟Original: 2017-11-20 09:48:592494browse

In our previous article, we introduced to you an example of how to implement a slideshow in JavaScript. Everyone knows this in detail. Today we will continue to introduce to you how to Use JavaScriptnative code to implement slideshow examples.

The effect is as follows:

##The code is as follows:

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

Summary:

This article is very simple JavaScript native code to implement the code for slides. Friends can read and study carefully. When you need it for your work, You can use it as a reference, it will have the effect of attracting new ideas!

Related recommendations:

A simple example of using JavaScript to implement a slideshow

JS implementation method of Taobao slideshow effect

php+javascript slideshow generation code

The above is the detailed content of JavaScript native code to implement slideshow. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple example of JavaScript slideshowNext article：Simple example of JavaScript slideshow

See more

JavaScript native code to implement slideshow

Related articles