Cleverly use arrays to create image switching js code-JS Tutorial-php.cn

Cleverly use arrays to create image switching js code

高洛峰

Release： 2016-12-03 14:49:27

Original

1152 people have browsed it

In the previous article, we talked about the specific operations of arrays in JS. For details, see (Summary of various operations of Array in JS). We will not explain it in detail here. The main purpose today is how to use an array to simply switch between left and right pictures.

The specific steps for image switching in this article are as follows:

Step 1: Simple layout and design basic display style;
Step 2: Get related elements through js;
Step 3: Image url and image through array Storage of corresponding text descriptions;
Step 4: Initialization: including initialization of pictures, displaying picture numbers and initialization of corresponding text, etc.;
Step 5: Click the button to switch pictures and write the corresponding function, which is actually a simple application of arrays.

Implementation code:

<!DOCTYPE html> <br>
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>图片切换</title> 
 <style> 
 .box{ 
 width: 600px; 
 height:400px; 
 border: 10px solid #ccc; 
 position: relative; 
 margin: 40px auto 0; 
 } 
 .box a{ 
 width: 30px; 
 height: 30px; 
 background-color: #000; 
 border: 5px solid #fff; 
 position: absolute; 
 top:180px; 
 text-align: center; 
 font-size:25px; 
 font-weight: bold; 
 line-height: 30px; 
 color:#fff; 
 text-decoration: none; 
 filter: alpha(opacity:40); 
 opacity: 0.4; 
 } 
 .box a:hover{ 
 filter:alpha(opacity:80); 
 opacity:0.8; 
 } 
 .box #prev{ 
 left: 10px; 
 } 
 .box #next{ 
 right: 10px; 
 } 
 #text,#num{ 
 height: 30px; 
 line-height:30px; 
 width: 600px; 
 color:#fff; 
 position: absolute; 
 left: 0; 
 background-color: #000; 
 text-align: center; 
 filter: alpha(opacity:80); 
 opacity: 0.8; 
 margin:0; 
 } 
 .box #text{ 
 bottom: 0; 
 } 
 .box #num{ 
 top:0; 
 } 
 .box #img1{ 
 width: 600px; 
 height: 400px; 
 } 
 </style> 
 <script> 
 window.onload = function () { 
 var oPrev = document.getElementById("prev"); 
 var oNext = document.getElementById("next"); 
 var oText = document.getElementById("text"); 
 var oNum = document.getElementById("num"); 
 var oImg = document.getElementById("img1"); 
  
 var arrUrl = [&#39;images/1.jpg&#39;,&#39;images/2.jpg&#39;,&#39;images/3.jpg&#39;,&#39;images/4.jpg&#39;]; 
 var arrText = [&#39;文字1&#39;,&#39;文字2&#39;,&#39;文字3&#39;,&#39;文字4&#39;]; 
  
 //初始化 
 var num = 0; 
 function fnTab(){ 
 oNum.innerHTML = num + 1 + &#39;/&#39; + arrText.length; 
 oImg.src = arrUrl[num]; 
 oText.innerHTML = arrText[num]; 
 }; 
 fnTab(); 
 oPrev.onclick = function(){ 
 num --; 
 if( num == -1){ 
  num = arrUrl.length -1; 
 } 
 fnTab(); 
 }; 
 oNext.onclick = function(){ 
 num ++; 
 if(num == arrUrl.length){ 
  num = 0; 
 } 
 fnTab(); 
 }; 
 }; 
 </script> 
</head> 
<body> 
 <div class="box"> 
 <a id="prev" href="javascript:;"> < </a> 
 <a id="next" href="javascript:;"> > </a> 
 <p id="text">图片正在加载中……</p> 
 <span id="num">数量正在统计中……</span> 
 <img id="img1" src="../images/1.jpg" alt=""> 
 </div> 
</body> 
</html>

Copy after login

This example is very simple. It mainly involves simple reading and writing of arrays and reading and writing of html attribute content. What needs to be noted is that when we click the next picture to the last picture or click the previous picture to the first picture, we need to set specific numerical changes. Otherwise, it will cross the boundary. Then the pictures, numbers and corresponding questions will No content.