JS는 배열을 사용하여 참조를 위해 이미지 스위칭 효과를 만듭니다. 특정 내용은 다음과 같습니다
배열 요소 위치 변환 :
콘텐츠를 배열로 나누고 첫 번째 컨텐츠를 끝에 추가 한 다음 첫 번째 콘텐츠를 삭제합니다.
<div id = "box"> 1,2,3,4 </div> <입력 유형 = "버튼"value = 'switch'id = 'input'> <cript> window.onload = function () {var odiv = document.getElementById ( 'box'); var oinput = document.getElementById ( 'input'); OINPUT.onClick = function () {var arr = odiv.innerhtml.split ( ','); // console.log (ARR); arr.push (arr [0]); // 첫 번째 것을 끝에 추가하고 첫 번째 arr.shift ()를 삭제합니다. odiv.innerhtml = arr; }} </script>시뮬레이션 사진 전환 효과 :
Window.onload = function () {var adiv = document.getElementsByTagName ( 'div'); var ainput = document.getElementsByTagName ( 'input'); var arr = []; // (var i = 0; i <adiv.length; i ++) {console.dir (getStyle (adiv [i], 'left'))에 대한 속성을 저장하기 위해 빈 배열을 만듭니다. arr.push ([getstyle (adiv [i], 'left'), getstyle (adiv [i], 'top')); } // console.dir (arr); ainput [0] .onclick = function () {// 첫 번째 것을 끝에 추가하고 첫 번째 arr.push (arr [0])를 삭제합니다. arr.shift (); for (var i = 0; i <adiv.length; i ++) {// 배열을 작동 한 후 adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; ainput [1] .onclick = function () {// 마지막 하나를 전면에 추가하고 마지막 arr.unshift를 삭제합니다 (arr [arr.length-1]); arr.pop (); for (var i = 0; i <adiv.length; i ++) {adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; 함수 getStyle (obj, attr) {// 최종 스타일을 가져옵니다. if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}간단한 렌더링 :
Example version:
아이디어 :
5 개의 그림이있는 경우 : 그림 1에서 5의 왼쪽 값은 20px, 60px, 100px, 240px 및 380px;
왼쪽 토글 버튼을 클릭 한 후, 그림 1에서 5의 해당 값은 60px, 100px, 240px, 380px, 20px;
--------------------------------------------------------------------------------------------------------------------------------
이 배열 세트의 첫 번째 요소를 끝으로 이동하는 것과 같습니다 : 20px, 60px, 100px, 240px, 380px, 20px;
그런 다음 첫 번째 요소를 60px, 100px, 240px, 380px, 20px로 삭제합니다.
등:
예제 레이아웃 :
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "images/1.png"width = '300'> </li> <li class = 'pos_1'> <img src = "images/1.jpg"width = '400'> </li> <li class = 'pos_2'> <img src = "이미지/2.jpg" width = '500'> </li> <li class = 'pos_3'> <img src = "images/3.jpg"width = '400'> </li> <li class = 'pos_4'> <img src = "images/1.jpg"width = '300'> </li> </ul> < 'dir dir </ul> </lip'> dirr '> </span> </div>
예제 스타일 :
#box {width : 700px; 높이 : 300px; 위치 : 상대; 마진 : 20px 자동; 텍스트-정렬 : 중심;}#box ul {list-style : none;}#box ul li {position : elbetute;}#box ul li.pos_0 {top : 50px; 왼쪽 : 20px; li.pos_1 {top : 20px; 왼쪽 : 60px; z-index : 2; 불투명도 : 0.8;}#box ul li.pos_2 {상단 : 0px; 왼쪽 : 100px; z-index : 3; 불투명도 : 1;}#box ul li.pos_3 {top : 20px; 왼쪽 : 240px; li.pos_4 {top : 50px; 왼쪽 : 380px; z-index : 1; 불투명도 : 0.5;}. dir {display : inline-block; width : 45px; 높이 : 100px; 배경 : URL ( 'images/button.png') no-repeat : 절대 : 60px; z-index : 4;} 0; 왼쪽 : 40px;}. Dirr {배경 위치 : -55px 0; 오른쪽 : 40px;}JS 코드 :
window.onload = function () {var opre = document.getElementsByClassName ( 'dir') [0]; var onext = document.getElementsByClassName ( 'dir') [1]; var ali = document.getElementsByTagName ( 'li'); var arr = []; for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ( 'img') [0]; // console.log (getStyle (ali [i], 'left'); // console.log (parseint (getstyle (ali [i], '불투명도')*100); // console.log (getStyle (ali [i], 'z-index'); // console.log (oimg.width); arr.push ([parseint (getstyle (ali [i], 'top')), parseint (getstyle (ali [i], '불투명도')*100), parseint (getstyle (ali [i], 'z-index'), oimg.width]; // console.log (arr [i] [2]); } // console.dir (arr); Opre.onClick = function () {// 왼쪽 arr.push (arr [0]); arr.shift (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ( 'img') [0]; //console.log(Arr=]); startMove (ali [i], {왼쪽 : arr [i] [0], 상단 : arr [i] [1], 불투명도 : arr [i] [2],}); ali [i] .style.zindex = arr [i] [3]; startMove (oimg, {너비 : ARR [i] [4]}); }}; onext.onclick = function () {// 오른쪽 arr.unshift (arr [arr.length-1]); arr.pop (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ( 'img') [0]; startMove (ali [i], {왼쪽 : arr [i] [0], 상단 : arr [i] [1], 불투명도 : arr [i] [2],}); ali [i] .style.zindex = arr [i] [3]; startMove (oimg, {너비 : ARR [i] [4]}); }}; 함수 getStyle (obj, attr) {// 단위의 값을 가져옵니다. if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}생식 이미지 :
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.