나는 세 개의 사진 회전 목마를 직접 썼다. 하나는 간단한 기본 J로 구현되며 애니메이션 효과가 없습니다. 다른 하나는 jQuery와 함께 구현되며 인수 및 아웃으로 전환됩니다. 이제 블로그 나 개인 웹 사이트에서 더 멋진 사람을 만들고 싶습니다. 그 당시 내 자신의 작품을 표시 할 수 있습니다. MOOC에서 잠시 쇼핑 한 후, 나는 회전 목마 jQuery 플러그인 코스가 있다는 것을 알았습니다. 그래서 약간 멋 졌기 때문에 기본 JS에서 캡슐화하는 것에 대해 생각했습니다. 그것을 한 후에 만 내가 생각했던 것만 큼 쉽지는 않았습니다. . . 더 이상 그것에 대해 이야기하지 말고 구현 프로세스를 설명해 봅시다.
2. 효과
내 서버가 아직 설치되지 않았기 때문입니다. 온라인 데모 (ORZ ...)가 없으므로 렌더링 만 할 수 있습니다.
대략적인 효과는 여전히 그림에서 볼 수 있으므로 많이 말하지 않을 것입니다. 실제 코드 효과를보고 싶다면 GitHub 다운로드 코드에 오신 것을 환영합니다. 내 github 프로젝트에서 별을주는 것을 잊지 마십시오^_^
III. 구현 프로세스
HTML 구조
<div data-setting = '{ "width": 1000, "height": 400, "carrouselwidth": 750, "carrouselheight": 400, "scale": 0.9, "verticalalign": "middle"}'> <div> </div> <ul> <li> <a href = "#"> <img src = "img/1.jpg">> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </a> </a> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </</</li> </li> <a href = "#"> <img src = "img/4.jpg"> </a> </a> </a> </a> </a> </a> </a> </a> </a> </li> <li> a href = "#"> <img src = "img/5.jpg"> </a> </ul> <div> </div> </div>이 구조는 일반 회전 목마의 HTML 코드 구조와 동일합니다. 약간의 차이점은 기본 회전 목마 div에 데이터 설정 속성이 있다는 것입니다. 여기에는 일부 회전식 효과 매개 변수가 포함되어 있습니다. 매개 변수의 구체적인 중요성은 나중에 설명됩니다.
CSS 부품의 코드는 게시되지 않습니다. 가장 중요한 것은 요소의 절대적인 위치에주의를 기울이는 것입니다. 렌더링에서 볼 수 있듯이 각 이미지의 위치와 크기는 다르므로 JS를 통해 제어되므로 절대 포지셔닝이 필요합니다. JS의 구현 프로세스에 중점을 두겠습니다.
JS 구현 프로세스
JS의 몇 가지 주요 단계에 대해 이야기합시다. 이 단계를 수행 한 후에는 어려움이 없습니다.
default 매개 변수
패키지 플러그인이므로 구성 해야하는 매개 변수에 대한 기본값이 확실히 있습니다. 이 플러그인에서 다음 매개 변수는 주로 다음과 같습니다.
너비 : 1000, // 슬라이드 면적의 너비
높이 : 400, // 슬라이드 영역의 높이
carrouselwidth : 700, // 슬라이드의 첫 번째 프레임의 너비
CarrouselHeight : 400, // 슬라이드의 첫 번째 프레임의 높이
스케일 : 0.9, // 스케일 관계를 기록합니다. 예를 들어, 두 번째 그림의 너비와 높이가 표시 될 때 첫 번째 그림의 너비와 높이가 얼마나 작습니다.
AutoPlay : True, // 자동으로 재생됩니까?
타임 스팬 : 3000, // 자동 재생 시간 간격
verticalalign : '중간'// 이미지 정렬, 세 가지 방법이 있습니다 : 상단/중간/하단, 기본값은 중간입니다.
객체를 캡슐화하십시오
웹 사이트는 여러 장소에서 동일한 회전 목마 플러그인을 사용할 수 있으므로 포장이 중요합니다. 이 객체를 정의한 후 객체의 초기화 메소드를 정의하면 여러 객체를 만들 수 있습니다. 모든 클래스의 동일한 DOM을 통과하면됩니다. 따라서 초기화 방법은 다음과 같습니다.
carousel.init = function (carrousels) {var _this = this; // NODELIST를 배열로 변환 var cals = toArray (carrousels); <br> /*네이티브 J는 모든 클래스를 얻기 때문에, 당신이 얻는 것은 클래스 배열 인 노드리스트입니다. 배열 메소드를 사용하려면 실제 배열로 변환해야합니다. 여기에 ToArray는 변환 방법입니다. */ cals.foreach (함수 (항목, 색인, 배열) {new _this (항목);}); }이런 식으로 Window.onload에있을 때 carrousel.init (document.queryselectorall ( '. carrousel-main')); 이렇게하면 여러 회전 목마를 만들 수 있습니다!
first 첫 번째 프레임의 위치 매개 변수를 연결합니다
첫 번째 프레임 이후의 모든 프레임의 관련 매개 변수는 첫 번째 프레임을 참조하여 정의되므로 첫 번째 프레임을 잘 정의하는 것이 중요합니다.
setValue : function () {this.carrousel.style.width = this.settings.width+'px'; this.carrousel.style.height = this.settings.height+'px'; /*왼쪽 및 왼쪽 버튼 설정, 여기에서 왼쪽 및 오른쪽 버튼 이후의 영역은 첫 번째 프레임의 너비에서 빼냅니다. Z-Index는 첫 번째 프레임을 제외한 모든 그림보다 높으며 사진은 왼쪽과 오른쪽으로 배치되므로 Z-Index의 값은 그림 수의 절반입니다. */ var btnw = (this.settings.width- this.settings.carrouselwidth)/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.height = this.settings.height+'px'; this.prebtn.style.zindex = math.ceil (this.carrouselitems.length/2); this.nextbtn.style.width = btnw+'px'; this.nextbtn.style.height = this.settings.height+'px'; this.nextbtn.style.zindex = math.ceil (this.carrouselitems.length/2); // 첫 번째 프레임 관련 설정 this.carrouselfir.style.left = btnw+'px'; this.carrouselfir.style.top = this.setcarrouselalign (this.settings.carrouselheight)+'px'; this.carrouselfir.style.width = this.settings.carrouselwidth+'px'; this.carrouselfir.style.height = this.settings.carrouselheight+'px'; this.carrouselfir.style.zindex = math.floor (this.carrouselitems.length/2);},여기서 새 개체가 사용되면 DOM 노드로 이동하여 데이터 설정 매개 변수를 얻은 다음 기본 매개 변수 구성을 업데이트하십시오. 여기에 주목할 곳이 있습니다. 사용자가 매개 변수를 구성 할 때 모든 매개 변수를 한 번 구성하지 않기 때문에 매개 변수를 얻을 때 값을 할당하여 기본 매개 변수를 직접 업데이트 할 수 없습니다. 값이 직접 할당되고 사용자가 구성되면 매개 변수가 손실됩니다. 여기에 나는 매개 변수를 업데이트하기 위해 jQuery의 $ .extend 메소드와 유사한 객체 확장 메소드를 작성했습니다. 자세한 내용은 나열하지 않으며 관심이 있으시면 다운로드 할 수 있습니다.
gother 그림 위치 설정
여기의 그림은 실제로 첫 번째 그림이 두 개의 왼쪽과 오른쪽 그림으로 나뉘어져 있고 왼쪽의 그림 위치와 오른쪽의 그림은 다르므로 별도로 구성해야합니다.
// 오른쪽 var var rightIndex = level; rightlice.foreach (함수 (item, index, array) {rightindex--; var i = index; rw = rw*carrouselself.settings.scale; // 오른쪽의 그림은 척도에 따라 점차 작습니다. scale.zindex. 오른쪽에있는 Z-index는 일반적인 그림 item.width = rw+'px'를 사용하여 점차적으로 감소 할 수 있습니다. 여기서 방법은 다음과 같습니다. 첫 번째 프레임 너비를 빼고, 2를 나눈 다음 왼쪽 또는 오른쪽 항목의 그림 수를 나누는 다음 왼쪽 값은 첫 번째 프레임의 왼쪽+첫 번째 프레임의 왼쪽+항목의 넓은 값입니다. item.style.top = carrouselself.setcarrouselalign (rh)+'px';});왼쪽의 설정 방법은 비슷하고 단순하므로 자세한 내용은 없습니다.
⑤ 회전 중에 모든 그림의 위치 크기 조정
이 단계는 매우 중요합니다. 오른쪽 버튼에서 다음 버튼을 클릭하는 것은 왼쪽 회전이며 왼쪽 버튼의 이전 버튼을 클릭하는 것은 오른쪽 회전입니다. 이 시점에서는 모든 그림을 반지로 간주하고 한 번 클릭하고 위치를 변경하고 회전을 완료하면됩니다. 구체적으로 왼쪽 회전이 회전 할 때 두 번째 그림의 매개 변수를 첫 번째 그림과 동일하고 세 번째 그림은 두 번째 그림과 동일하며 마지막 그림은 첫 번째 그림과 같습니다. 오른쪽으로 회전 할 때 첫 번째 그림의 매개 변수를 두 번째 그림과 동일하게 만들고 두 번째 그림의 매개 변수는 세 번째 그림과 동일합니다 ... 마지막 그림의 매개 변수는 첫 번째 그림과 같습니다.
여기서 왼쪽 회전에 대해 이야기합시다
if (dir == 'left') {toArray (this.carrouselitems) .foreach (function (item, index, array) {var pre; if (index == 0) {// 첫 번째 pre = _this.carrousellat; // 마지막 var var var var var var var를 얻습니다. zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture refers to 첫 번째 사진은 먼저 변경 될 때, 첫 번째 그림은 일시적으로 저장되어야합니다. inited.width = item.style.zindex = opa; }));};}애니메이션을 너무 많이 사용하지 않으면 여기 회전이 뻣뻣 해 보입니다. 그러나 기본 JS에는 애니메이션 기능이 없으며 여기에 모방 된 애니메이션 기능을 직접 썼습니다. 원칙은 DOM의 원래 스타일 값을 얻고 새로 통과 한 값과 비교하는 것입니다. 속도를 정의하기 위해 몇 가지 방법을 사용하십시오. 여기서 내 속도는 18의 차이를 나누는 것입니다. 그러나 타이머를 정의하고 jQuery 소스 코드의 시간 간격을 참조하여 13 밀리 초마다 실행됩니다. 그런 다음 원래 스타일 값이 들어오는 값에 추가 될 때마다 타이머가 명확합니다. 자세한 내용은 여기를 참조하십시오.
자, 핵심 사항은 거의 동일하며 이러한 프로세스를 이해하면 쉬워야합니다!
4. 요약 및 반사
요약 :
나는 개인적으로 이것이 비교적 이해하기 쉬운 플러그인이라고 생각합니다. jQuery와 함께 수행하는 것은 매우 간단합니다. 그러나 원본에서 글을 쓰면 여전히 조금 덜 매끄 럽습니다. jQuery가 캡슐화 한 애니메이션만큼 맞춤 애니메이션이 좋지 않아야합니다.
또한 이미지를 왼쪽과 오른쪽의 양쪽에 균등하게 나누어야하기 때문에 그림의 숫자 균일에 대해서도 여기에 사용 된 방법은 첫 번째 그림을 복제 한 다음 끝에 추가하고 홀수를 형성하는 것입니다.
생각하다:
버그가있는 경우 RotateFlag 플래그를 정의하여 현재 회전 할 수 있는지 여부를 결정합니다. 즉, 빠른 클릭으로 유지하지 못하게됩니다. 내가 눌렀을 때, 나는 RotateFlag를 False로 설정 한 다음 애니메이션이 끝난 후 RotateFlag를 True로 설정했지만 그 효과는 분명하지 않은 것 같습니다. 관련 마스터가 나에게 조언을 줄 수 있고 모두가 함께 진전을 이룰 수 있기를 바랍니다.
위는이 기사의 전체 내용입니다. 자세한 내용은 다음을 참조하십시오. JavaScript 사진 회전식 효과 요약. 읽어 주셔서 감사합니다.