플러그인! 플러그인! 사람들 이이 플러그인과 그 플러그인을 매일 요구하는 것을 들었습니다. 물론 타사 플러그인을 사용하면 개발 효율성을 크게 향상시킬 수 있지만 초보자로서는 여전히 시간이 있기 때문에 직접 구현하고 싶습니다!
오늘 나는 네이티브 js를 사용하여 사진 회전 목마를 쓰는 방법을 당신과 공유하겠습니다.
노인들은 다음의 말도 안되는 것을 무시할 수 있습니다.
시작하기 전에 지금까지 프론트 엔드를 배우는 경험에 대해 이야기하겠습니다. 오늘은 약 2 개월이되어야합니다. 기본적으로 매일 6-10 시간의 공부 시간이 걸리며 순전히 자아 학습이며 훈련은 신뢰할 수 없다고합니다! 나는 현재 3 개의 주요 항목 (HTML5, CSS3, JavaScript) 만 배우고 있으며 다른 모든 지식은 여전히 학습 계획보다 뒤떨어져 있습니다 ... 나는 혼란의시기에 있으며 먼저 무엇을 배울지 모르겠습니다! 어쨌든 세 가지 주요 항목을 먼저 정리해 봅시다. 좋은 제안이 있다면 조언을 드릴 수 있기를 바랍니다.
HTML5에서 CSS3에 이르기까지, 나는 프론트 엔드가 매우 간단하다고 느꼈기 때문에 약간 자신감과 동기가 있다고 느꼈습니다. 그런 다음 JS를 배웠습니다. 나는 C#과 Apple의 신속한 것을 배웠습니다. 그것들은 객체 지향적이고 강력한 언어이며 비교적 발전된 언어입니다. 그러나 나는 여전히 프론트 엔드를 좋아해서 여기로 돌아 서서 JS를 배우기 시작했습니다. 쉬웠지만이 언어가 약간 지저분하고 다른 사람들과 다르다고 느꼈습니다! 권위있는 가이드에는 이해하기 쉽지 않은 것들이 있습니다. 할 수 없다면 바이두를 더 살펴보고 클로저 및 프로토 타입과 같은 개념에 대한 다른 사람들의 이해를 더 많이 살펴보고 점차적으로 마스터 할 수 있습니다. 이 단계에서 프론트 엔드에 많은 것들이 포함되어 있음을 점차 깨달았을 것입니다! 타사 라이브러리, 프레임 워크 등 다양한 것들이 있습니다. 요컨대, 새로운 명사는 계속 눈앞에서 나타납니다. 어떤 사람들은 이것이 구식이 될 것이며 주류가 될 것이라고 말합니다. 매우 지저분한! 다음에 어떻게 가야합니까? 먼저 무엇을 배울 수 있습니까? 나중에 무엇을 배울 수 있습니까?
나는 현재이 단계에있다. 때로는 연속 2 일 동안 아무것도 보지 못하고 잠을 잘 수 없으며 화를 내지 못합니다. 즉, 나는 집착합니다!
방금 생각했는데, 나에게 무슨 문제가 있습니까? 나는 그것을 알아낼 수 없다! 잊어 버리고 휴식을 취하고 몸을 운동하십시오! 그냥 가서 돌아 다니며 돌아 다니십시오! 생각하는 동안 : 자신을 주로 돌아 오는 방법!
나중에 나는 이것을했다 : 사탕을 줘! (스스로 간단한 예를 들여)
나는 사탕이 너무 달콤해서 실제로 만들 수 있다는 것을 알았습니다! 성취감은 여유롭고 동기 부여가 가득합니다! 방금 한 사례를 썼습니다. API를 이해하지 못하거나 익숙하지 않은 경우 문서를 번역 할 것입니다 (다른 사람들의 코드를 읽기 전에 직접 작성하겠습니다. 실제로 할 수 없다면 다시 읽을 것입니다). 점차적으로, 나는 정말로 돌아 왔고 궤도에 오르기 시작했다고 느꼈다!
또한 현재 프론트 엔드 회사를 모집하는 대부분의 회사들이 어떤 종류의 프론트 엔드 회사에 필요한지 살펴보고 나서 나 자신을 위해 새로운 연구 계획을 세웠습니다. 물론 지금은 시간이 있기 때문에 먼저 세 가지 주요 기초를 먼저 통합하고 더 많은 연습을 한 다음 다시 돌아가서 문서를 다시 읽고 기본 및 내부 원칙을 이해하고 싶습니다! 다음에 무엇을 배우 든 시작하는 것이 훨씬 쉬울 것입니다! 동시에 프론트 엔드를 계속 이해하십시오! 이 직업의 전망과 방향을 이해하는 것은 자신을위한 프론트 엔드 월드 뷰를 확립하여 배울 때 방향을 잃지 않도록하는 것입니다!
어떤 제 3 자 라이브러리와 프레임 워크를 배워야하는지에 대해서는 지금은 모르겠습니다. JQ는 구식입니까? 배워야합니까? 잘 모르겠습니다. 더 이상 신경 쓰지 않고 먼저 원주민과 함께 놀아요! 당신은 미래에 자연스럽게 알아야합니다!
실제 전투는 시작되고 다음은 코드와 데모입니다.
나는 현재 선배들의 객체 지향 쓰기 방법을 배울 수 없으므로 일부 기능 만 쓸 수 있습니다. (사진은 인터넷에서 나옵니다. 300*200 사진을 직접 자르면 효과를 볼 수 있습니다. 시작하려면 '등급 및 출력 버튼을 클릭하십시오).
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin : 0; 패딩 : 0; 목록 스타일 : 없음; 텍스트 결정 : 없음; } #slide {위치 : 절대; 상단 : 100px; 왼쪽 : 50px; 너비 : 300px; 높이 : 200px; 테두리 : 1px 단단한 회색; } #slide .Blog-name {display : block; 위치 : 절대; 하단 : 0; 왼쪽 : 0; 너비 : 100%; 높이 : 25px; 라인 높이 : 25px; 배경색 : RGBA (155,155,155,0.5); Z- 인덱스 : 4; 커서 : 포인터; 텍스트 안정 : 3px; } #slide-nav {위치 : 절대; 오른쪽 : 5px; 하단 : 5px; Z- 인덱스 : 5; } #slide-nav li {디스플레이 : 인라인-블록; 너비 : 16px; 텍스트 정렬 : 센터; 라인 높이 : 16px; Border-Radius : 5px; 커서 : 포인터; 오버플로 : 숨겨진; } #slide-nav li : 호버, .Selected {background-color : #336699; 색상 : 흰색; } .slide-content1 {위치 : 절대; 너비 : 300px; 높이 : 200px; 글꼴 크기 : 0; } .slide-content1 a {위치 : 절대; 커서 : 포인터; } .slide-content1 a : visited {color : black;} #model-btn {위치 : 절대; 상단 : -25px; 글꼴 크기 : 20px; }. for (var i = 0; i <= 21; i ++) {var op = i * 5; id = settimeout (function (e) {setOpacity (img, e)} .bind (this, op), i * 50); } cleartimeout (id); } 함수 숨기기 (IMG) {var id; for (var i = 0; i <= 21; i ++) {var op = 100 -i * 5; id = settimeout (function (e) {setOpacity (img, e)} .bind (this, op), i * 20); } cleartimeout (id); } function getById (id) {return document.getElementById (id); } function setOpacity (elem, level) {if (elem.filter) {elem.style.filter = "alpha (불투명 =" + level + ")"; // ie} else {elem.style.opacity = level/100과 호환됩니다. }} // (고급 및 프로그레시브 모드) 신체 함수 inoutModel (nums, navid, imgcontainerid, imginfoid, delay) {// 모드 선택 버튼의 여러 클릭을 방지하기 위해 더 많은 li를 생성하기 위해 ( 'slide-nav'). var targetidext = 0; // 사진 상태 정보 저장 정보 var currentIdext = 0; // 사진 상태 정보 저장 정보 var gras = document.createdOcumentFragment (); for (var i = 0; i <nums; i ++) {nav [i] = fragment.appendChild (document.createElement ( 'li')); // 부록 메소드는 li nav [i] .innerhtml = i+1을 반환합니다. } getByid (navid) .appendChild (Frag); // 첫 번째 이미지를 표시하도록 초기화 var imgs = getById (imgcontainerid) .getElementsByTagName ( 'a'); var info = getbyid (imginfoid); info.innerhtml = imgs [0] .title.slice (0,12)+'...'; nav [0] .classname = 'selected'; // Li의 클래스 이름의 동적 변경 사항 (var j = 1; j <nav.length; j ++) {setOpacity (imgs [j], 0); } // 자동 회전식을 시작합니다 var id; 함수 start (delay) {id = setInterval (function () {hide (imgs [cureentidext]); nav [cureentidext] .className = ''; if (targetIdext <nums-1) {targetIdext ++;} else {targetIdext = 0; info.innerhtml = imgs [targetIdext] .title.slice (0,12)+'...'; } 시작 (지연); // (var k = 0; k <nav.length; k ++) {nav [k] .onclick = function (event) {var e = event || window.event; // ie var t = event.target || event.srcelement와 호환됩니다. // ie var idex = parseint (t.innerhtml) -1과 호환됩니다. console.log ( 'iDex :'+idex+'t :'+targetIdext+'c :'+cureentIdext); if (idex === humen [cureentidext]); nav [cureentidext] .crassName = ''; Humenidext = IDEX; 쇼 (IMGS [IDEX]); nav [idex] .classname = 'selected'; info.innerhtml = imgs [idex] .title.slice (0,12)+'...'; }} getByid (navid) .onmouseOver = function () {clearInterVal (id)}; getByid (navid) .onmouseout = function () {start (Delay)}; } // 오른쪽에서 왼쪽으로 왼쪽 모드로 OPTRICT OFTRIGHTMODEL (NAMS, NAVID, IMGCONTAINERID, IMGINFOID, DELAD) {ALERT ( '블로거는 게으르고이 기능을 구현하는 것을 잊어 버렸습니다! 필요한 경우 메시지를 남겨주세요!'); } fromTopModel (nums, navid, imgcontainerid, imginfoid, delay) {alert ( '블로거는 게으르고이 기능을 구현하는 것을 잊어 버렸습니다! 필요한 경우 메시지를 남겨주세요!'); } return {inoutModel : inoutModel, fromrightModel : fromrightModel, fromTopModel : fromTopModel : FromTopModel, getByid}} (); sufuimagescrooller.getByid ( 'model-btn1'). onclick = function () {sufuimagescrooller.inoutModel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getByid ( 'model-btn2'). onclick = function () {sufuimagescrooller.fromrightmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getByid ( 'model-btn3'). onclick = function () {sufuimagescrooller.fromTopModel ( 'slide-nav', 'slide-main', 'slide-info', 3500); }; }; </script> </head> <body> <div id = "slide"> <a id = "slide-info"href = "http://www.cnblogs.com/susufufu/"target = "_ blank"> sufu의 블로그 </a> <ul id = "slide-nav "> </ul> <div-main"> href = "http://www.cnblogs.com/susufufu/p/5749922.html"target = "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5768431.html"target = "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhhy/it/u=428685119,2694540617&fm=21&gp=0.jpg"</div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5738673.html"target = "_ blank"> <div> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"</div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5714020.html"target = "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </a> <a href = "http://www.cnblogs.com/susufufu/p/5759480.html"target = "_ blank"> <div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhhy/it/u=4104312586,15899074&fm=21&gp=0.jpg"> </a> </div id = "model-btn"> input type = "button"id = "model-btn1"value = "grospual progressive"> <input type = "button"id = "model-btn2"value = "오른쪽에서 왼쪽"> <입력 유형 = "button"id = "model-btn3"value = "상단에서 하단"> </div> </div> </body> </html>처음에는 구현 방법에 대해 생각해보십시오. 타이머를 사용하여 그림을 변경하고 컷 스톤에서 그림의 불투명도를 변경하지 않습니까?
1. HTML 레이아웃은 비교적 간단합니다.
<ul id = "slide-nav"> </ul> <div id = "slide-main"> <a href = "target ="_ blank "> <div> <img src ="lg1.png "> </div> </a> ... </div> ...
슬라이드 인포는 사진 제목을 표시하는 데 사용됩니다. Slide-Nav는 디지털 버튼이며 Slide-Main은 그림 컨테이너이며 그림 링크가 내부에 배치됩니다.
JS를 통해 동적으로 생성되기 때문에 태그에 작성된 Li는 없습니다.
2. CSS 스타일의 설정을 경험하는 한 이해할 수 있습니다. 그들에게주의를 기울이십시오 :
• 자신만의 레이아웃을 만들기 전에 상위 요소에 테두리를 추가하여 장면을 이해하고 마지막으로 제거 할 수 있도록하는 것이 가장 좋습니다.
• Ul Li와 다른 많은 태그에는 기본적으로 패딩이 있으며 모두 0으로 설정해야합니다.
*{마진 : 0; 패딩 : 0; 목록 스타일 : 없음; 텍스트 결정 : 없음; }높이 : 25px; 및 라인 높이 : 25px; 둘은 동일하여 캐릭터를 중심으로 할 수 있습니다.
Z-Index는 형제와 자녀에 대해서만 적용되며 부업의 친척에게는 무효입니다. 사이드 라인의 친척 앞에 표시되기를 원한다면 부업에 친척의 조상을 설정하십시오. 예를 들어, 할아버지는 총리이고 두 번째 주인은 농부이며, 가족의 모든 정체성은 두 번째 마스터 가족의 모든 정체성보다 고귀합니다.
• 위치 : 절대적; 그것은 또한 그의 아버지와 관련이 있습니다. 그의 아버지가 포지셔닝을 설정하지 않았다면, 신뢰할 수 없으므로, 그것을 찾을 때까지 지원을 계속 찾아서 그를 의지하여 그것을 배치하십시오!
• 오른쪽에서 왼쪽으로 효과를 달성하려면 글꼴 크기를 기억하십시오 : 0; 그림 사이의 간격에 대해 명확하고 그림을 어깨에서 어깨를 유지하십시오!
말이 진행됨에 따라 연습은 완벽합니다. CSS가 솔직 할 때만 레이아웃을 제어 할 수 있습니다! 예를 들어, 다음의 이중 날개 레이아웃은 포지셔닝없이 달성 할 수 있습니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> body {margin : 0; 패딩 : 0; } .Header, .footer {너비 : 100%; 높이 : 50px; 라인 높이 : 50px; 텍스트 정렬 : 센터; 배경색 : Greenyellow; } .Container {오버플로 : 숨겨진; *줌 : 줌 : 줌 : 줌 : 1; 1; } .left {float : 왼쪽; 너비 : 100px; 높이 : 100px; 마진 왼쪽 : -100%; 배경색 : 녹색; } .main {float : 왼쪽; 너비 : 100%; 높이 : 100px; 배경색 : 회색; }. 오른쪽 {float : 왼쪽; 너비 : 200px; 높이 : 100px; 마진 왼쪽 : -200px; 배경색 : 금; } .Center {Padding-left : 100px; 패딩-오른쪽 : 200px; } </style></head><body><div>header</div><div> <div>main-center</div> </div> <div>left</div> <div>right</div></div><div>footer</div></body></html>코드 구현
먼저 개요를 작성하십시오.
var sufuimagescrooller = function () {function getByid (id) {... ...} // Universal Get Elem 객체 기능 setOpacity (elem, level) // 투명도 함수 HIME 설정 (img) {...} // function show (omg) {...} // 가짜 기능에서 가짜 기능 (inmg, aviner, imgcontainer, imgcontainerid, imgcontainer) } // 기본 기능 본체 return {inoutModel : inoutModel, ...}} ();이런 식으로, sufuimagescrooller, sufuimagescrooller를 통해 inoutmodel 메소드를 호출 할 수 있습니다. inoutModel (5, 'slide-nav', 'slide-main', 'slide-info', 3500);
inoutModel (nums, navid, imgcontainerid, imginfoid, delay) 매개 변수 : Nums는 Li의 수를 생성합니다.이 수는 그림 수, Navid 디지털 버튼 컨테이너 ID, imgcontainerid 그림 컨테이너 ID, ImginFoid가 그림 제목 정보 ID를 표시하고 지연 시간을 표시합니다.
개요를 작성한 후 절반이 완료됩니다. 다른 것들은 특정 세부 사항의 구현입니다. 나는 잘 쓰지 않았다. 이 기능을 구현했다고 만 말할 수 있습니다. 모두가 스스로 생각합니다. 좋은 제안이 있으시면 자유롭게 앞으로 나아가십시오.
inoutmodel 함수를 자르고 시작한 다음 단계별로 더 깊이 이동하십시오. 열쇠는 수동으로 입력하는 것입니다. 당신이 그것을 보면, 당신은 그 깊은 경험이 없을 것입니다!
좋아요, 그게 요점입니다. 문서 API를 직접 번역하는 방법을 모르면 나에게 물어볼 메시지를 남길 수도 있습니다.
위의 기사 "Native JS + Front-End (강박 관념 방지)의 회전식 효과를 실현하는 느낌은 내가 공유하는 모든 내용입니다. 참조를 제공 할 수 있기를 바랍니다. Wulin.com을 더 지원할 수 있기를 바랍니다.