사진 회전 목마에 대해 분개하고 잘 배우지 못했기 때문에 최근 CSS에 대한 관심을 높일 수 없으므로 JS에 익숙해지기 위해 시간이 걸렸습니다. 그런 다음 Black Road로 걸어 가서 jQuery와 JS를 사용하여 회전 목마와 그림 페이딩의 효과를 썼습니다. 미래의 학습의 길은 매우 길다. 나는 프론트 엔드 도로에서 더 나아가서`(∩_∩) ''
원칙적으로 온라인으로 많은 튜토리얼이 있습니다.
페이드에 빠졌지 만 실제로는 페이드 효과 만 사용됩니다. 각각의 희미한 그림에 대해, 우리는 그 디스플레이를 차단하도록 설정하고 다른 그림은 없기 때문에 실제로 존재하고 문서 스트림에 위치를 차지하는 그림이 하나뿐입니다. 그림의 디스플레이 방법을 설정하기 전에 점차 사진의 투명성을 증가 시키면 사람들에게 페이딩을 느낄 수 있습니다.
실제로 JS 코드에는 또 다른 핵심 사항이 있습니다. 클로저는 코드에 사용되므로 클로저를 약간 이해하고 있습니다. 여기에 몇 마디 더 말씀 드리겠습니다.
폐쇄에 대한 공식적인 설명은 폐쇄가 많은 변수와 이러한 변수에 묶인 환경을 갖는 표현식 (일반적으로 함수)이므로 이러한 변수는 표현식의 일부라는 것입니다.
가장 간단한 방법은 다음과 같습니다.
함수 A의 내부 함수 B가 변수 외부 함수 A에 의해 참조되면 폐쇄가 생성됩니다.
더 철저하게 말했다. 소위 "클로저"는 다른 함수를 생성자 본문의 메소드 함수로 정의하는 것입니다.이 객체의 메소드 함수는 외부 기능 본체의 임시 변수를 나타냅니다. 이를 통해 원래 생성자 본문이 사용하는 임시 변수 값은 대상 객체가 수명 동안 항상 방법을 유지할 수있는 한 간접적으로 유지 될 수 있습니다.
초기 생성자 호출이 끝나고 임시 변수의 이름이 사라졌지만 변수의 값은 항상 대상 객체의 메소드 내에서 참조 될 수 있으며이 방법에서만 값에 액세스 할 수 있습니다. 동일한 생성자가 다시 호출 되더라도 새로운 객체와 메소드 만 생성됩니다. 새로운 임시 변수는 새 값에만 해당하며 마지막 통화와 무관합니다.
다음 기능은 폐쇄 기능입니다. 왜 폐쇄를 사용합니까? 일반적인 기능은 불가능합니까? 실제로는 불가능합니다. 여기서 폐쇄의 목적은 깃발에 대한 참조를 유지하는 것입니다. 로컬 변수의 경우, 함수가 한 번 실행되는 한, 즉 플래그가 한 번 실행되는 한 로컬 변수의 경우, 가비지 수집 메커니즘에 의해 로컬 변수가 수집되고 정리됩니다. 간헐적 호출의 함수를 통해 플래그 변수를 참조합니다. 두 번째 실행이 실행되면 플래그는 값을 잃고 기능 본체는 올바른 결과를 실행할 수 없습니다. 프론트 엔드를 만지기 시작했을 때 폐쇄는 선택 사항이라고 생각했습니다. 사실, 이것은 정말로 중요하다는 것입니다!
var setVal = function (s, flag) {return function () {pos = math.abs (parseint (pic.style [point]); if (flag> 0) {// 현재 지점은 대상 지점의 좌표보다 크면 그림이 오른쪽으로 이동하고 왼쪽 값은 pic.style [point] = -math.floor (pos +(s*ssinglesize)*speed) +'px'; } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*속도) +'px'; } if (pos == (ssinglesize * s)) {now = s; ClearInterval (간격); }}};코드는 다음과 같습니다.
HTML
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </title> <link href = "css/index.css"rel = "Stylesheet"type = "text/css"> <script type = "text/javascript" src = "js/jquery-1.3.2.js"> </script> <script src = "js/index.js"> </script> </head> <body onload = "init ()"> <div id = "picbox"> <ul class = "show_pic"style = "left : 0"> <li class = ""> src = "imgs/ccc.jpg"/> </a> </li> <li> <img src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/> </li> <li> img src = "imgs/cc.jpg"/>>. <li> <img src = "imgs/ccc.jpg"/> </li> <li> <img src = "imgs/ccc.jpg"/> </li> </ul> <div class = "bg"> </div> <ul class = "share_des"> boots4 </li> <li> boots4 </li> <li> boots5 </li> <li> boots5 </li> <li> boots5 </li> </ul> <ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> <li> 5 </ul> </html.
CSS
바디 {글꼴 크기 : 12px; } ul, li {패딩 : 0; 여백 : 0; 목록 스타일 : 없음; } #picbox {너비 : 610px; 높이 : 205px; 마진 : 50px 자동; 오버플로 : 숨겨진; 위치 : 상대; font-size : 0;}/*회전 목마 그림*/#picbox .show_pic {너비 : 3050px; 위치 : 절대;}#picbox .show_pic li {float : 왼쪽; 너비 : 610px; 높이 : 205px; 디스플레이 : 없음; /*디스플레이 : 없음;*/}#picbox .show_pic li.on {display : block;}#picbox .show_pic li img {display : block; 너비 : 610px; 높이 : 205px;}#picbox .icon_num {위치 : 절대; 하단 : 12px; 오른쪽 : 10px; z-index : 10;}#picbox .icon_num li {float : 왼쪽; /*배경 : URL (/uploadfile/200912/28/fa15567738.gif) no -Repeat -15px 0; */ 너비 : 16px; 높이 : 16px; 글꼴 크기 : 16px; 색상 : #39F; 텍스트 정렬 : 센터; 커서 : 포인터; 마진-오른쪽 : 5px;} #picbox .icon_num li.on {background : #000; 불투명도 : 0.5; }/*배경*/. bg {z-index : 1; 위치 : 절대; 하단 : 0; 높이 : 40px; 너비 : 610px; 배경 : #000; 불투명도 : 0.6; 필터 : 알파 (불투명 = 60);}#picbox .show_des {너비 : 300px; 높이 : 18px; 위치 : 절대; 하단 : 11px; 왼쪽 : 15px; 색상 : #fff; z-index : 10;}#picbox .show_des li {display : none; 라인 높이 : 18px; font-size : 18px;}#picbox .show_des li.on {display : block;}JS
함수 cleanwhitespace (oelement) {for (var i = 0; i <oelement.childnodes.length; i ++) {var node = oeelement.childnodes [i]; if (node.nodetype == 3 &&! // s/.test (node.nodevalue)) {node.parentNode.removeChild (Node); }}} // carousing code this.layerglide = function (auto, obox, ssinglesize, 둘째, fspeed, point) {var interval, timeout; // 두 타이머 var pos; // 현재 위치 지정의 절대 값 좌표 var time = second, now = 0; // 시간 이미지가 한 번 간격으로 이동합니다. 이제 현재 이미지의 인덱스 값 var var speed = fspeed // 움직임 속도 var 지연 = 두 번째 * 1000; // 이미지의 각 전환에 대한 시간 간격 var var picbox = document.getElementById (obox); CleanWhitespace (Picbox); var pic = picbox.childnodes [0]; // 그림 목록 var des = picbox.childnodes [2] .getElementsByTagName ( "li"); // 그림 목록 var con = picbox.childnodes [3] .getElementsByTagName ( "li"); var sum = con.length; var setVal = function (s, flag) {return function () {pos = math.abs (parseint (pic.style [point]); if (flag> 0) {// 현재 지점은 대상 지점의 좌표보다 크면 그림이 오른쪽으로 이동하고 왼쪽 값은 pic.style [point] = -math.floor (pos +(s*ssinglesize)*speed) +'px'; } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*속도) +'px'; } if (pos == (ssinglesize * s)) {now = s; ClearInterval (간격); }}}}; var changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .classname = ""; des [i] .classname = ""; }; con [num] .classame = "on"; des [num] .classame = "on"; var flag = math.abs (parseint (pic.style [point])-ssinglesize * num; interval = setInterval (setVal (num, flag), 시간); //bkg.hide (). fadein (); } function autoglide () {cleartimeout (Interval); 지금 = (지금 == (parseint (sum) -1))? 0 : (지금 + 1); changeto (지금); 시간 초과 = settimeout (autoglide, Delay); } function isaUto () {if (auto) {timeout = settimeout (autoglide, delay); }; } isauto (); // (var i = 0; i <sum; i ++) // 탐색 버튼 {con [i] .onmouseOver = (function (i) {return function () {cleartimeout (timeout); clearInterVal (interval); this.onmouseout = isauto (}}) (i)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} this.layerfader = function (Auto, Obox, Second, Count, Speed) {var interval, timeout; // 두 타이머 var now = 0; // 시간 사진이 한 번 간격으로 이동합니다. 이제 현재 그림의 인덱스 값 var 딜리어 = 두 번째 * 1000; // 각 이미지의 시간 간격이 전환됩니다. var picbox = document.getElementById (obox); CleanWhitespace (Picbox); var pic = picbox.childnodes [0] .getElementsByTagName ( "li"); var des = picbox.childnodes [2] .getElementsByTagName ( "li"); var con = picbox.childnodes [3] .getElementsByTagName ( "li"); var sum = con.length; 기능 Fadein (elem) {setOpacity (elem, 0); // (var i = 0; i <= count; i ++) {// 투명성 변경 20 * 5 = 100 (함수 (i) {var level = i * 5; // 투명도 변경 값마다 settimeout (function () {setOpacity (elem, level)}, i * speed)) (i); }} function setOpacity (elem, level) {// 투명성 설정 if (elem.filters) {elem.style.filter = "alpha (opacity =" + level + "); } else {elem.style.opacity = level / 100; }} var changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .classname = ""; des [i] .classname = ""; pic [i] .classname = ""; }; Fadein (pic [num]); con [num] .classame = "on"; des [num] .classame = "on"; pic [num] .classame = "on"; //bkg.hide (). fadein (); } function autoglide () {cleartimeout (Interval); 지금 = (지금 == (parseint (sum) -1))? 0 : (지금 + 1); changeto (지금); 시간 초과 = settimeout (autoglide, Delay); } function isaUto () {if (auto) {timeout = settimeout (autoglide, delay); }; } isauto (); // (var i = 0; i <sum; i ++) // 탐색 버튼 {con [i] .onmouseOver = (function (i) {return function () {cleartimeout (timeout); // clearinterval (interval); changeto (i); this.onmouseout = isauto (}})jQuery는 JS보다 훨씬 간단하므로 여기서는 자세히 설명하지 않습니다. 3 학년이되었을 때 디자인 패턴 수업을 들었습니다. 교사는 구현보다는 인터페이스를위한 프로그램을 우리에게 말했습니다. 코드의 재사용 성을 향상시키기 위해 코드에 상수가 나타나지 않도록하십시오. 따라서 코드를 작성할 때 모든 변수 요소가 매개 변수에 언급됩니다. 마지막 문장, JS DOM 작전의 경우 JS Native는 왕국입니다. 더 많이 사용하고 더 많은 연습을 통해서만 잘 마스터 할 수 있습니다. 앞으로 나아갈 수 있기를 바랍니다.
이미지 회전 목마 및 페이드 인 효과를 구현하는 기본 J의 위의 간단한 예는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.