집 >웹 프론트엔드 >JS 튜토리얼 >영리하게 배열을 사용하여 이미지 전환 js 코드 만들기

영리하게 배열을 사용하여 이미지 전환 js 코드 만들기

高洛峰원래의: 2016-12-03 14:49:271157검색

이전 기사에서는 JS의 구체적인 배열 작업에 대해 설명했습니다. 자세한 내용은 (JS의 다양한 배열 작업 요약)을 참조하세요. 오늘의 주요 목적은 배열을 사용하여 왼쪽과 오른쪽 그림 사이를 간단히 전환하는 방법입니다.

이 글의 이미지 전환에 대한 구체적인 단계는 다음과 같습니다.

1단계: 간단한 레이아웃 및 디자인 기본 표시 스타일
2단계: js를 통해 관련 요소 가져오기; ;
3단계: 배열을 통해 이미지 URL과 해당 텍스트 설명을 저장합니다.
4단계: 초기화: 이미지 초기화, 사진 번호 표시 및 해당 텍스트 초기화 등을 포함합니다. 5 : 버튼을 클릭하여 그림을 전환하고 해당 기능을 작성합니다. 실제로는 간단한 배열 적용입니다.

구현 코드:

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

이 예제는 주로 간단한 배열 읽기 및 쓰기와 html 속성 콘텐츠 읽기 및 쓰기를 포함합니다. 주목해야 할 점은 마지막 사진의 다음 사진을 클릭하거나 첫 번째 사진의 이전 사진을 클릭할 때 특정 숫자 변경 사항을 설정해야 한다는 것입니다. 그렇지 않으면 사진, 숫자 및 해당 항목이 경계를 넘게 됩니다. 질문은 내용이 없습니다.

성명：

이전 기사：headjs는 웹사이트의 병렬 로딩을 구현하지만 JS의 순차적 실행을 구현합니다.다음 기사：headjs는 웹사이트의 병렬 로딩을 구현하지만 JS의 순차적 실행을 구현합니다.

영리하게 배열을 사용하여 이미지 전환 js 코드 만들기

관련 기사