자바스크립트 템플릿을 사용하여 슬라이드 쇼를 만듭니다. 사진 연구실. 슬라이더 컨트롤

슬라이드쇼 생성 프로그램 개요 웹 사이트용 슬라이드쇼 생성

웹사이트에 게시할 슬라이드쇼를 만들 때 기성 소프트웨어 솔루션을 사용하는 것이 가장 좋습니다. 제 생각에는 가장 좋고 쉬운 옵션은 특별한 무료 스크립트 라이브러리(작은 JavaScript 프로그램)인 jQuery를 사용하는 것입니다. 이전 기사에서는 이미 이 훌륭한 웹 개발 도구에 대해 이야기했습니다. 예를 들어 사진 갤러리 기사를 참조하세요. jQuery- 간단하고 아름답습니다! . 이제 jQuery를 사용하여 사이트에 슬라이더라고 불리는 슬라이드 쇼를 만들어 보겠습니다.

이를 위해 미국 오레곤 주 포틀랜드에 있는 디자인 스튜디오 "The Brigade"의 기술 이사인 프로그래머 Nathan Searles가 만든 Slides 플러그인을 사용할 것입니다. 그의 또 다른 발전은 온라인 상점의 사진 갤러리 기사에 설명되어 있습니다.

Slides 플러그인은 설치가 쉽고 슬라이드 쇼에서 이미지를 변경할 수 있는 여러 옵션이 있으며 사이트 헤더에 자주 사용됩니다. 이 슬라이더가 기본 설정에서 작동하는 방식의 예가 그림에 나와 있습니다.

슬라이드쇼 설치 슬라이드

언제나 그렇듯이 먼저 사이트에 스크립트 폴더를 만듭니다. 그런 다음 아카이브를 다운로드하고 생성된 폴더에 압축을 풀어야 합니다. 여기에는 jquery-1.8.3.min.js 및 jquery.cycle.all.min.js라는 두 개의 스크립트가 포함됩니다.

다음으로, 태그 안의 페이지 제목에... 스크립트 경로를 나타내는 다음 줄과 슬라이드 쇼의 매개변수를 정의하는 작은 자바스크립트를 삽입합니다.

$(".슬라이드쇼").사이클((
fx: "페이드"
});
});

.슬라이드쇼(
너비: 200px;
높이: 135px;
여백: 자동;
}

보시다시피, 향후 슬라이드 쇼의 이미지에 대한 창 크기(너비 - 높이)를 지정해야 하는 간단한 CSS 규칙도 있습니다. 당연히 모든 이미지의 크기는 동일해야 합니다. 원하는 경우 슬라이드쇼 이미지에 테두리, 배경, 패딩 및 기타 요소 등을 추가하여 CSS 옵션을 확장할 수 있습니다. 이 경우 전체 크기, 즉 이미지에 설정한 길이와 너비에 따른 들여쓰기 및 테두리를 표시해야 합니다.

중요 사항:사이트에서 여러 jQuery 플러그인을 사용하는 경우 jquery.js 파일(가급적 최신 버전)을 루트 폴더로 이동하여 여러 번 다운로드하지 않는 것이 더 편리합니다. 이 경우 액세스 라인은 모든 플러그인에서 동일하게 보입니다. 특히 우리의 예에서는 다음과 같습니다.

서로 충돌하지 않도록 동일한 페이지에서 여러 다른 버전의 jQuery를 사용하는 것은 권장되지 않습니다. 동시에 모든 버전이 호환되는 것은 아니므로 플러그인이 설치된 jQuery 버전에서 작동하는지 확인하십시오.

마지막 단계는 페이지에 이미지를 배치하는 것입니다. 여기에서도 모든 것이 간단합니다. 너비와 높이를 설정할 수 있는 태그나 기타 태그 안에 이미지를 배치하고 class="slideshow" 를 지정하세요. 이 예에서 슬라이더의 HTML 코드는 다음과 같습니다.

이제 슬라이드쇼 생성이 거의 완료되었으며 브라우저에서 페이지를 열어 볼 수 있습니다.

슬라이드 쇼 옵션 설정 슬라이드

생성된 슬라이드쇼에서 페이지 헤더에 배치된 자바스크립트를 변경하여 프레임 간 전환 유형을 다양하게 설정할 수 있습니다. 또한 스크립트의 sync:false 줄을 sync:true 로 바꾸면 이미지를 변경할 때 공백을 제거할 수 있습니다.

이미지 표시 기간은 timeout 매개변수로 제어되고 속도는 speed 매개변수로 제어됩니다. 예를 들어, 다음은 페이지 헤더에 삽입해야 하는 몇 가지 일반적인 슬라이드쇼 옵션과 해당 스크립트입니다.

1. 해산(당사의 예): $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx: "페이드", //전환 유형 speed: 1000 , //이미지 변경 속도 시간 초과: 1000 //프레임 기간 }); });
2. 셔플링: $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx: "셔플", 동기화: 거짓, 속도: 500 시간 초과: 5000 }); });
3. 줌: $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx: "확대/축소", 동기화: 거짓 }); });
4. X 또는 Y축으로 뒤집기: $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx: "curtainX", // Y축을 따른 회전 - 커튼Y 동기화: 거짓 }); });
5. 수직으로 접기: $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx: "turnDown", // 방향을 설정할 수 있습니다.turnUp,turnLeft,turnRight 동기화: 사실 }); });
6. 스크롤(오프셋): $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx:"scrollDown", // 오프셋 방향을 설정할 수 있습니다. scrollUp, scrollLeft, scrollRight 동기화: 사실 }); });
7. 오른쪽으로 페이드: $(문서).ready(함수() ( $(".슬라이드쇼").사이클(( fx: "커버 }); });

이 문서에서 설명한 것처럼 사이트의 한 페이지에 여러 슬라이드쇼 옵션을 배치해야 하는 경우가 있습니다. 이렇게 하려면 $(".slideshow").cycle(((위 표의 코드 참조) 줄에서 각 옵션에 대해 서로 다른 클래스를 지정하고 각 클래스의 창 크기를 지정하는 것을 잊지 마세요. CSS에서.

슬라이드에 그림만 포함된 경우 구조를 약간 변경할 수 있습니다.

이전 다음

alt 속성에 의미 있는 값을 추가하는 것을 잊지 마세요.

페이지 링크를 사용하려면 다음을 수행할 수 있습니다.

... ... ... 1 2 3

이전 다음 1 2 3

"데이터" 속성의 사용에 유의하세요. 일부 슬라이드 쇼에서는 그림을 배경으로 삽입할 수 있으며 이러한 속성은 스크립트에서 배경과 슬라이드를 연결하는 장소로 사용됩니다.

목록 사용 의미상 올바른 접근 방식은 목록 항목을 슬라이드로 사용하는 것입니다. 이 경우 구조는 다음과 같습니다.

슬라이드 순서가 잘 정의된 경우(예: 프레젠테이션에서) 번호가 매겨진 목록을 사용할 수 있습니다.

CSS 다음 구조부터 시작해 보겠습니다.

이전 다음

왜냐하면 슬라이드쇼는 오른쪽에서 왼쪽으로 진행되므로 외부 컨테이너의 크기는 고정되어 있고 내부 컨테이너는 모든 슬라이드를 포함하므로 더 넓어집니다. 첫 번째 슬라이드가 표시됩니다. 이는 오버플로를 통해 설정됩니다.

슬라이더(너비: 1024px; 오버플로: 숨김; ) .slider-wrapper(너비: 9999px; 높이: 683px; 위치: 상대; 전환: 왼쪽 500ms 선형; )

내부 래퍼 스타일은 다음과 같습니다.

넓은 폭
- 고정 높이, 최대 슬라이드 높이
- 위치: 상대적이며 슬라이드 이동을 생성할 수 있습니다.
- CSS 전환이 왼쪽으로 이동하면 움직임이 부드러워집니다. 단순화를 위해 모든 접두어를 포함하지는 않았습니다. 이를 위해 CSS 변환(번역과 함께)을 사용할 수도 있습니다.

슬라이드에는 정렬을 위한 부동 속성이 있습니다. JS에서 왼쪽 오프셋을 얻을 수 있도록 상대적으로 배치됩니다. 우리는 그것을 사용하여 슬라이딩 효과를 만듭니다.

슬라이드( 부동: 왼쪽; 위치: 상대; 너비: 1024px; 높이: 683px; )

특정 너비를 설정했지만 스크립트에서는 슬라이드 수에 슬라이드 너비를 곱하여 너비를 변경할 수 있습니다. 어떤 너비가 필요한지 결코 알 수 없습니다.

탐색은 "이전" 및 "다음" 버튼을 통해 수행됩니다. 기본 스타일을 재설정하고 고유한 스타일을 지정합니다.

Slider-nav( 높이: 40px; 너비: 100%; margin-top: 1.5em; ) .slider-nav 버튼( 테두리: 없음; 디스플레이: 블록; 너비: 40px; 높이: 40px; 커서: 포인터; 텍스트 들여쓰기 : -9999em; 배경색: 투명; 배경 반복: 반복 없음; ) .slider-nav 버튼.slider-이전 ( float: 왼쪽; 배경 이미지: url(previous.png); ) .slider-nav 버튼 .slider-next ( float: right; 배경 이미지: url(next.png); )

버튼 대신 페이지 링크를 사용하면 다음 스타일을 만들 수 있습니다.

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( 디스플레이: inline-block; text-꾸밈: 없음; border: 1px solid #ddd; color: #444; width: 2em; 높이: 2em; 줄 높이: 2; 텍스트 정렬: 중앙; ) .slider-nav a.current ( 테두리 색상: #000; 색상: #000; 글꼴 두께: 굵게; )

이러한 클래스는 스크립트에서 동적으로 할당됩니다.

이 접근 방식은 슬라이딩 효과에 적합합니다. 페이드인 효과를 얻으려면 스타일을 변경해야 합니다. float는 슬라이드 사이에 수평 패딩을 추가하기 때문입니다. 즉, 한 줄에 슬라이드가 필요하지 않습니다. 슬라이드 "팩"이 필요합니다.

Slider ( width: 1024px; margin: 2em auto; ) .slider-wrapper ( width: 100%; height: 683px; position:relative; /* 절대 위치 지정을 위한 컨텍스트 생성 */ ) .slide ( position:absolute; /* 모든 슬라이드의 절대 위치 지정 */ 너비: 100%; 높이: 100%; 불투명도: 0; /* 모든 슬라이드가 숨겨집니다. */ 전환: 불투명도 500ms 선형; ) /* 처음에는 첫 번째 슬라이드만 표시됩니다. */ .slider- 래퍼 >
스크린 리더는 display: none이 있는 요소의 콘텐츠를 건너뛰기 때문에 불투명도 속성을 사용하여 슬라이드를 숨깁니다(CSS 작동: 스크린 리더 사용자를 위한 보이지 않는 콘텐츠 참조).

CSS 상황별 위치 지정 덕분에 우리는 소스의 마지막 슬라이드가 다른 슬라이드 앞에 놓이는 슬라이드 "스택"을 만들었습니다. 하지만 그것은 우리에게 필요한 것이 아닙니다. 슬라이드의 순서를 유지하려면 첫 번째 슬라이드를 제외한 모든 슬라이드를 숨겨야 합니다.

JS는 CSS 전환을 사용하여 현재 슬라이드의 불투명도 속성 값을 변경하고 다른 모든 슬라이드에서는 이 값을 0으로 재설정합니다.

페이지 매김이 없는 JavaScript 코드 슬라이드쇼 페이지 매김이 없는 슬라이드쇼는 "다음" 및 "이전" 버튼을 클릭하여 작동합니다. 이는 증가 및 감소 연산자로 생각할 수 있습니다. 버튼을 누를 때마다 증가하거나 감소하는 포인터(또는 커서)가 항상 있습니다. 초기값은 0이며, 배열 요소 선택과 동일하게 현재 슬라이드를 선택하는 것이 목표입니다.

따라서 처음으로 다음을 클릭하면 포인터가 1씩 증가하고 두 번째 슬라이드가 생성됩니다. 이전을 클릭하면 포인터가 줄어들고 첫 번째 슬라이드가 표시됩니다. 등.

포인터와 함께 jQuery의 .eq() 메서드를 사용하여 현재 슬라이드를 가져옵니다. 순수 JS에서는 다음과 같습니다.

함수 Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

기억하세요 - NodeList는 배열처럼 인덱스를 사용합니다. 현재 슬라이드를 선택하는 또 다른 방법은 CSS3 선택기를 사용하는 것입니다.

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = 포인터 + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

CSS3:nth-child() 선택기는 1부터 시작하여 요소를 계산하므로 포인터에 1을 추가해야 합니다. 슬라이드를 선택한 후 해당 상위 컨테이너를 오른쪽에서 왼쪽으로 이동해야 합니다. jQuery에서는 .animate() 메서드를 사용할 수 있습니다.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( 래퍼: ".slider-wrapper", 슬라이드: ".slide", //... 속도: 500, 여유 : "선형" ), 옵션); var SlideTo = function(슬라이드, 요소) ( var $currentSlide = $(options.slides, 요소).eq(슬라이드); $(options.wrapper, 요소).animate(( 왼쪽 : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

일반 JS에는 .animate() 메서드가 없으므로 CSS 전환을 사용합니다.

슬라이더 래퍼(위치: 상대; // 필수 전환: 왼쪽 500ms 선형; )

이제 스타일 객체를 통해 left 속성을 동적으로 변경할 수 있습니다.

이제 각 컨트롤에 대한 클릭 이벤트를 만들어야 합니다. jQuery에서는 .on() 메서드를 사용할 수 있고, 순수 JS에서는 addEventListener() 메서드를 사용할 수 있습니다.

또한 포인터가 목록 경계에 도달했는지 확인해야 합니다. "이전"은 0이고 "다음"은 총 슬라이드 수입니다. 각 경우에 해당 버튼을 숨겨야 합니다.

(function($) ( $.fn.slideshow = function(options) ( 옵션 = $.extend(( 래퍼: ".slider-wrapper", 슬라이드: ".slide", 이전: ".slider-이전", 다음 : ".slider-next", //... 속도: 500, 여유: "선형" ), options); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( 왼쪽: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("클릭", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) SlideTo(index, $element); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) SlideTo(index, $element); )); )); ); ))(jQuery);

그리고 순수 JS에서는 다음과 같습니다:

함수 Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), 작업: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "없음"; ) self._slideTo(self.index); ), 거짓); ) );

페이지가 매겨진 슬라이드쇼 이 유형의 슬라이드쇼에서는 각 링크가 하나의 슬라이드를 담당하므로 색인이 필요하지 않습니다. 애니메이션은 변경되지 않지만 사용자가 슬라이드를 이동하는 방식은 변경됩니다. jQuery의 경우 다음 코드가 있습니다.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( 래퍼: ".slider-wrapper", 슬라이드: ".slide", nav: ".slider-nav", 속도 : 500, 완화: "선형" ), 옵션); var SlideTo = function(슬라이드, 요소) ( var $currentSlide = $(options.slides, 요소).eq(슬라이드); $(options.wrapper, 요소). animate(( 왼쪽: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href) ")); SlideTo($slide, $element); $a.addClass("current").siblings().removeClass("current"); )); )); ))(jQuery);

이 경우 각 앵커는 특정 슬라이드의 ID에 해당합니다. 순수 JS에서는 NodeList 내부에 슬라이드의 숫자 인덱스를 저장하는 data 속성과 이를 모두 사용할 수 있습니다.

함수 Slider(요소) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), 탐색: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

IE10부터 classList를 통해 클래스를 관리할 수 있습니다.

Link.classList.add("현재");

IE11에서는 데이터 세트 속성을 통해 데이터 속성을 얻을 수 있습니다.

Var index =parseInt(a.dataset.slide, 10) + 1;

컨트롤이 포함된 페이지 슬라이드쇼 이러한 슬라이드쇼는 코드에 약간의 복잡성을 나타냅니다. 즉, 인덱스와 페이지 해시를 함께 사용해야 합니다. 즉, 포인터 위치와 링크를 통해 선택한 슬라이드를 모두 기준으로 현재 슬라이드를 선택해야 합니다.

이는 DOM 내 각 링크의 번호 인덱스를 통해 동기화될 수 있습니다. 하나의 링크 - 하나의 슬라이드이므로 색인은 0, 1, 2 등이 됩니다.

jQuery에서 코드는 다음과 같습니다.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... 페이지 매기기: ".slider-pagination", //... ), 옵션); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM 숫자 인덱스 $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == 총 - 1) ( $.fn.slideshow.index = 총 - 1; $next.hide(); ) else ( $next.show(); ) SlideTo($.fn.slideshow. index, $element); $a.addClass("current").siblings().removeClass("current"); )); )); ); //... ))(jQuery);

커서의 가시성이 변경된 것을 즉시 확인할 수 있습니다. 이제 인덱스가 슬라이드쇼 개체의 속성으로 선언됩니다. 이렇게 하면 jQuery의 콜백으로 인해 발생할 수 있는 범위 문제를 피할 수 있습니다. 이제 커서는 슬라이드쇼 개체의 공개 속성으로 선언되었으므로 플러그인 네임스페이스 외부에서도 어디에서나 사용할 수 있습니다.

.index() 메소드는 각 링크의 숫자 인덱스를 제공합니다.

순수 JS에는 그러한 방법이 없으므로 데이터 속성을 사용하는 것이 더 쉽습니다.

이제 프로시저를 참조와 연결하고 방금 생성한 데이터 속성을 사용할 수 있습니다.

작업: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), 거짓); ) )

차원 이해 다음 CSS 규칙으로 돌아가 보겠습니다.

슬라이더 래퍼(너비: 9999px; 높이: 683px; 위치: 상대; 전환: 왼쪽 500ms 선형; )

슬라이드가 많으면 9999로는 충분하지 않을 수 있습니다. 각 슬라이드의 너비와 슬라이드 수에 따라 슬라이드 크기를 즉석에서 조정해야 합니다.

jQuery에서는 간단합니다.

// 전체 너비 슬라이드쇼 return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

창 너비를 선택하고 각 슬라이드의 너비를 설정합니다. 내부 포장지의 전체 너비는 창 너비와 슬라이드 수를 곱하여 구합니다.

// 고정 너비 슬라이드쇼 return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total); //... ));

여기서 초기 너비는 각 슬라이드의 너비로 설정됩니다. 래퍼의 전체 너비만 설정하면 됩니다.

이제 내부 컨테이너가 충분히 넓어졌습니다. 순수 JS에서는 거의 같은 방식으로 수행됩니다.

// 전체 너비 슬라이드쇼 Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // 뷰포트의 너비 var winWidth = window .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var WrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

페이드 효과 페이드 효과는 슬라이드 쇼에서 자주 사용됩니다. 현재 슬라이드가 사라지고 다음 슬라이드가 나타납니다. jQuery에는 불투명도 및 표시 속성 모두에 작동하는 fadeIn() 및 fadeOut() 메서드가 있으므로 애니메이션이 완료되면(display:none) 해당 요소가 페이지에서 제거됩니다.

순수 JS에서는 불투명도 속성을 사용하고 CSS 위치 지정 스택을 사용하는 것이 가장 좋습니다. 그런 다음 처음에는 슬라이드가 표시되고(불투명도: 1) 나머지 슬라이드는 숨겨집니다(불투명도: 0).

다음 스타일 세트는 이 방법을 보여줍니다.

슬라이더(너비: 100%; 오버플로: 숨김; 위치: 상대; 높이: 400px; ) .slider-wrapper(너비: 100%; 높이: 100%; 위치: 상대; ) .slide( 위치: 절대; 너비: 100 %; 높이: 100%; 불투명도: 0; ) .slider-wrapper > .slide:first-child ( 불투명도: 1; )

순수 JS에서는 각 슬라이드의 CSS 전환을 등록해야 합니다.

슬라이드( 부동: 왼쪽; 위치: 절대; 너비: 100%; 높이: 100%; 불투명도: 0; 전환: 불투명도 500ms 선형; )

jQuery를 사용하여 fadeIn() 및 fadeOut() 메서드를 사용하려면 불투명도와 표시를 변경해야 합니다.

슬라이드( 부동: 왼쪽; 위치: 절대; 너비: 100%; 높이: 100%; 표시: 없음; ) .slider-wrapper > .slide:first-child ( 표시: 블록; )

jQuery에서 코드는 다음과 같습니다.

(function($) ( $.fn.slideshow = function(options) ( 옵션 = $.extend(( 래퍼: ".slider-wrapper", 이전: ".slider-previous", 다음: ".slider-next" , 슬라이드: ".slide", nav: ".slider-nav", 속도: 500, 여유: "선형" ), 옵션); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides , element).eq(slide); $currentSlide.animate(( opacity: 1 ), options.speed, options.easing).siblings(options.slides).css("opacity", 0); ); //. .. ); ))(jQuery);

불투명도에 애니메이션을 적용할 때 나머지 슬라이드에 대한 이 속성 값도 변경해야 합니다.

JavaScript에서는 다음과 같습니다.

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

미디어 요소: 비디오 슬라이드쇼에 비디오를 포함할 수 있습니다. 다음은 Vimeo의 비디오 슬라이드쇼 예입니다.

동영상은 iframe을 통해 포함됩니다. 이것은 그림과 동일한 교체 가능한 인라인 블록입니다. 교체 가능 - 콘텐츠를 외부 소스에서 가져오기 때문입니다.

전체 페이지 슬라이드쇼를 만들려면 다음과 같이 스타일을 변경해야 합니다.

Html, body ( 여백: 0; 패딩: 0; 높이: 100%; min-height: 100%; /* 높이는 전체 페이지여야 합니다 */ ) .slider ( 너비: 100%; 오버플로: 숨김; 높이: 100 %; min-height: 100%; /* 전체 높이 및 너비 */ position: 절대; /* 절대 위치 지정 */ ) .slider-wrapper ( width: 100%; height: 100%; /* 높이 및 너비 전체 */ 위치: 상대; ) .slide ( float: 왼쪽; 위치: 절대; 너비: 100%; 높이: 100%; ) .slide iframe ( 디스플레이: 블록; /* 블록 요소 */ 위치: 절대; /* 절대 위치 지정 */ 너비: 100%; 높이: 100%; /* 전체 높이 및 너비 */ )

자동 슬라이드쇼 자동 슬라이드쇼는 타이머를 사용합니다. setInterval() 타이머 함수가 호출될 때마다 커서가 1씩 증가하여 다음 슬라이드가 선택됩니다.

커서가 최대 슬라이드 수에 도달하면 재설정해야 합니다.

끝없는 슬라이드쇼는 사용자에게 금방 지루해집니다. 가장 좋은 방법은 사용자가 애니메이션 위로 마우스를 가져가면 애니메이션을 중지하고 커서가 멀어지면 다시 시작하는 것입니다.

(function($) ( $.fn.slideshow = function(options) ( 옵션 = $.extend(( 슬라이드: ".slide", 속도: 3000, 여유: "선형" ), 옵션); var 타이머 = null; // 타이머 var index = 0; // 커서 var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true).animate (( opacity: 1 ), options.speed, options.easing).siblings(options.slides).css("opacity", 0); ); var autoSlide = function(element) ( // 시퀀스 초기화 타이머 = setInterval ( function() ( index++; // 커서를 1씩 늘립니다. if(index == $(options.slides, element).length) ( index = 0; // 커서 재설정 ) SlideTo(index, element); ), options.speed ); // 메소드와 동일한 간격.animate() ); var startStop = function(element) ( element.hover(function() ( // 애니메이션 중지 ClearInterval(timer); 타이머 = null; ), function () ( autoSlide(element); // 애니메이션 재개 )); ); return this.each(function() ( var $element = $(this); autoSlide($요소); 시작정지($element); ))); ); ))(jQuery);

.stop() 메소드의 두 매개변수는 모두 true로 설정됩니다. 시퀀스에서 애니메이션 대기열을 만들 필요가 없습니다.

순수 JS에서는 코드가 더 단순해집니다. 특정 기간 동안 각 슬라이드에 대한 CSS 전환을 등록합니다.

슬라이드( 전환: 불투명도 3초 선형; /* 3초 = 3000밀리초 */)

그리고 코드는 다음과 같습니다:

키보드 탐색 고급 슬라이드쇼는 키보드 탐색을 제공합니다. 키를 눌러 슬라이드를 스크롤합니다. 우리에게 이는 단순히 키 누르기 이벤트 처리를 등록해야 함을 의미합니다.

이를 위해 이벤트 객체의 keyCode 속성에 액세스합니다. 누른 키의 코드(코드 목록)를 반환합니다.

"이전" 및 "다음" 버튼에 연결한 이벤트를 이제 "왼쪽" 및 "오른쪽" 키에 연결할 수 있습니다. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // 왼쪽 화살표 $next.trigger("click"); ) if( code == 37) ( // 오른쪽 화살표 $previous.trigger("click"); ) ));

순수 JS에서는 간단한 .trigger() 메서드 대신에 dispatchEvent()를 사용해야 합니다.

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // 마우스 클릭 if(code == 39) ( // 왼쪽 화살표 self .next.dispatchEvent(evt); ) if(code == 37) ( // 오른쪽 화살표 self.previous.dispatchEvent(evt); ) ), false);

괜찮은 프로젝트에서는 이것을 수행하는 것이 관례가 아닙니다. 공개 메서드에서 뒤집기를 제공하는 기능을 정의한 다음 버튼을 클릭할 때 이를 호출해야 합니다. 그런 다음 프로그램의 다른 부분에서 이 기능을 구현해야 하는 경우 DOM 이벤트를 에뮬레이트할 필요가 없고 간단히 이 메서드를 호출하면 됩니다.

콜백 해당 작업이 수행될 때 실행될 슬라이드쇼 작업에 일부 코드를 첨부할 수 있다면 좋을 것입니다. 이것이 콜백 함수의 목적입니다. 특정 작업이 발생할 때만 실행됩니다. 슬라이드쇼에 캡션이 있고 기본적으로 숨겨져 있다고 가정해 보겠습니다. 애니메이션 시 현재 슬라이드에 대한 캡션을 표시하거나 이에 대한 작업을 수행해야 합니다.

jQuery에서는 다음과 같은 콜백을 만들 수 있습니다.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... 콜백: function() () ), 옵션); var SlideTo = function(슬라이드, 요소) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.animate(( opacity: 1 ), options.speed, options.easing, // 현재 슬라이드에 대한 콜백 options.callback($ currentSlide)).siblings(options.slides).css("opacity", 0); ); //... ); ))(jQuery);

이 경우 콜백은 현재 슬라이드를 인수로 사용하는 .animate()의 함수입니다. 사용 방법은 다음과 같습니다.

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = Slide.parent(); // 현재 캡션을 표시하고 다른 캡션은 숨깁니다. $wrapper.find (" .slide-caption").hide(); Slide.find(".slide-caption").show("slow"); ) )); ));

순수 JS에서는:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // 콜백 this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = this; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

콜백 함수는 생성자의 두 번째 매개변수로 정의됩니다. 다음과 같이 사용할 수 있습니다.

Document.addEventListener("DOMContentLoaded", function() ( var Slider = new Slideshow("#main-slider", function(slide) ( var Wrapper = Slide.parentNode; // 현재 캡션을 표시하고 다른 캡션은 숨깁니다. var allSlides = Wrapper.querySelectorAll(".slide"); var caption = Slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

외부 API 지금까지의 작업 시나리오는 간단합니다. 모든 슬라이드가 이미 문서에 있습니다. 외부(YouTube, Vimeo, Flickr)에서 데이터를 삽입해야 하는 경우 외부 콘텐츠를 수신할 때 즉시 슬라이드를 채워야 합니다.

타사 서버의 응답이 즉각적이지 않을 수 있으므로 프로세스가 진행 중임을 보여주기 위해 로딩 애니메이션을 삽입해야 합니다.

이전 다음

gif 또는 순수 CSS 애니메이션일 수 있습니다.

#spinner ( border-radius: 50%; border: 2px solid #000; 높이: 80px; 너비: 80px; 위치: 절대; 위쪽: 50%; 왼쪽: 50%; 여백: -40px 0 0 -40px; ) # 스피너:후( 내용: ""; 위치: 절대; 배경색: #000; 상단:2px; 왼쪽: 48%; 높이: 38px; 너비: 2px; 테두리 반경: 5px; -webkit-transform-origin: 50% 97%; 변환 원본: 50% 97%; -webkit-animation: 각도 1s 선형 무한; 애니메이션: 각도 1s 선형 무한; ) @-webkit-keyframes 각도 ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes 각도( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( 내용: ""; 위치: 절대; 배경색: #000; 위쪽: 6px; 왼쪽: 48%; 높이: 35px; 너비: 2px; 테두리 반경: 5px; -webkit-transform-origin: 50% 94% ; 변환 원본: 50% 94%; -webkit-animation: ptangular 6s 선형 무한; 애니메이션: ptangular 6s 선형 무한; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes 직사각형( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

단계는 다음과 같습니다:
- 외부에서 데이터 요청
- 부트로더 숨기기
- 데이터 분석
- HTML을 구축
- 슬라이드 쇼를 표시
- 슬라이드 쇼 처리

YouTube에서 사용자의 최신 동영상을 선택한다고 가정해 보겠습니다. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( 래퍼: ".slider-wrapper", //... 로더: "#spinner", //... 제한: 5, 사용자 이름: "learncodeacademy" ), 옵션); //... var getVideos = function() ( // YouTube에서 동영상 가져오기 var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // 비디오를 JSON 개체 $(options.loader)로 가져옵니다. hide( ); // 로더 숨기기 var items = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

순수 JavaScript에는 JSON을 가져오는 방법을 만드는 추가 단계가 있습니다.

그런 다음 절차는 비슷합니다.

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = 콜백 || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON 객체 callback(data); ) else ( console.log( request.status); ) ); ), //... getVideos: function() ( var self = this; // YouTube 동영상 가져오기 var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // 비디오를 JSON 개체로 가져오기 var 항목 = videos.feed.entry ; var html = ""; self.loader.style.display = "없음"; // 로더 숨기기 for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки

슬라이드에 그림만 포함된 경우 구조를 약간 변경할 수 있습니다.

이전 다음

alt 속성에 의미 있는 값을 추가하는 것을 잊지 마세요.

페이지 링크를 사용하려면 다음을 수행할 수 있습니다.

... ... ... 1 2 3

이전 다음 1 2 3

목록 사용 의미상 올바른 접근 방식은 목록 항목을 슬라이드로 사용하는 것입니다. 이 경우 구조는 다음과 같습니다.

슬라이드 순서가 잘 정의된 경우(예: 프레젠테이션에서) 번호가 매겨진 목록을 사용할 수 있습니다.

CSS 다음 구조부터 시작해 보겠습니다.

이전 다음

슬라이더(너비: 1024px; 오버플로: 숨김; ) .slider-wrapper(너비: 9999px; 높이: 683px; 위치: 상대; 전환: 왼쪽 500ms 선형; )

내부 래퍼 스타일은 다음과 같습니다.

슬라이드( 부동: 왼쪽; 위치: 상대; 너비: 1024px; 높이: 683px; )

탐색은 "이전" 및 "다음" 버튼을 통해 수행됩니다. 기본 스타일을 재설정하고 고유한 스타일을 지정합니다.

버튼 대신 페이지 링크를 사용하면 다음 스타일을 만들 수 있습니다.

이러한 클래스는 스크립트에서 동적으로 할당됩니다.

JS는 CSS 전환을 사용하여 현재 슬라이드의 불투명도 속성 값을 변경하고 다른 모든 슬라이드에서는 이 값을 0으로 재설정합니다.

포인터와 함께 jQuery의 .eq() 메서드를 사용하여 현재 슬라이드를 가져옵니다. 순수 JS에서는 다음과 같습니다.

기억하세요 - NodeList는 배열처럼 인덱스를 사용합니다. 현재 슬라이드를 선택하는 또 다른 방법은 CSS3 선택기를 사용하는 것입니다.

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = 포인터 + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

일반 JS에는 .animate() 메서드가 없으므로 CSS 전환을 사용합니다.

슬라이더 래퍼(위치: 상대; // 필수 전환: 왼쪽 500ms 선형; )

이제 스타일 객체를 통해 left 속성을 동적으로 변경할 수 있습니다.

또한 포인터가 목록 경계에 도달했는지 확인해야 합니다. "이전"은 0이고 "다음"은 총 슬라이드 수입니다. 각 경우에 해당 버튼을 숨겨야 합니다.

그리고 순수 JS에서는 다음과 같습니다:

IE10부터 classList를 통해 클래스를 관리할 수 있습니다.

Link.classList.add("현재");

IE11에서는 데이터 세트 속성을 통해 데이터 속성을 얻을 수 있습니다.

Var index =parseInt(a.dataset.slide, 10) + 1;

이는 DOM 내 각 링크의 번호 인덱스를 통해 동기화될 수 있습니다. 하나의 링크 - 하나의 슬라이드이므로 색인은 0, 1, 2 등이 됩니다.

jQuery에서 코드는 다음과 같습니다.

.index() 메소드는 각 링크의 숫자 인덱스를 제공합니다.

순수 JS에는 그러한 방법이 없으므로 데이터 속성을 사용하는 것이 더 쉽습니다.

이제 프로시저를 참조와 연결하고 방금 생성한 데이터 속성을 사용할 수 있습니다.

차원 이해 다음 CSS 규칙으로 돌아가 보겠습니다.

슬라이더 래퍼(너비: 9999px; 높이: 683px; 위치: 상대; 전환: 왼쪽 500ms 선형; )

슬라이드가 많으면 9999로는 충분하지 않을 수 있습니다. 각 슬라이드의 너비와 슬라이드 수에 따라 슬라이드 크기를 즉석에서 조정해야 합니다.

jQuery에서는 간단합니다.

창 너비를 선택하고 각 슬라이드의 너비를 설정합니다. 내부 포장지의 전체 너비는 창 너비와 슬라이드 수를 곱하여 구합니다.

여기서 초기 너비는 각 슬라이드의 너비로 설정됩니다. 래퍼의 전체 너비만 설정하면 됩니다.

이제 내부 컨테이너가 충분히 넓어졌습니다. 순수 JS에서는 거의 같은 방식으로 수행됩니다.

다음 스타일 세트는 이 방법을 보여줍니다.

순수 JS에서는 각 슬라이드의 CSS 전환을 등록해야 합니다.

슬라이드( 부동: 왼쪽; 위치: 절대; 너비: 100%; 높이: 100%; 불투명도: 0; 전환: 불투명도 500ms 선형; )

jQuery를 사용하여 fadeIn() 및 fadeOut() 메서드를 사용하려면 불투명도와 표시를 변경해야 합니다.

슬라이드( 부동: 왼쪽; 위치: 절대; 너비: 100%; 높이: 100%; 표시: 없음; ) .slider-wrapper > .slide:first-child ( 표시: 블록; )

jQuery에서 코드는 다음과 같습니다.

불투명도에 애니메이션을 적용할 때 나머지 슬라이드에 대한 이 속성 값도 변경해야 합니다.

JavaScript에서는 다음과 같습니다.

미디어 요소: 비디오 슬라이드쇼에 비디오를 포함할 수 있습니다. 다음은 Vimeo의 비디오 슬라이드쇼 예입니다.

동영상은 iframe을 통해 포함됩니다. 이것은 그림과 동일한 교체 가능한 인라인 블록입니다. 교체 가능 - 콘텐츠를 외부 소스에서 가져오기 때문입니다.

전체 페이지 슬라이드쇼를 만들려면 다음과 같이 스타일을 변경해야 합니다.

자동 슬라이드쇼 자동 슬라이드쇼는 타이머를 사용합니다. setInterval() 타이머 함수가 호출될 때마다 커서가 1씩 증가하여 다음 슬라이드가 선택됩니다.

커서가 최대 슬라이드 수에 도달하면 재설정해야 합니다.

.stop() 메소드의 두 매개변수는 모두 true로 설정됩니다. 시퀀스에서 애니메이션 대기열을 만들 필요가 없습니다.

순수 JS에서는 코드가 더 단순해집니다. 특정 기간 동안 각 슬라이드에 대한 CSS 전환을 등록합니다.

슬라이드( 전환: 불투명도 3초 선형; /* 3초 = 3000밀리초 */)

그리고 코드는 다음과 같습니다:

이를 위해 이벤트 객체의 keyCode 속성에 액세스합니다. 누른 키의 코드(코드 목록)를 반환합니다.

"이전" 및 "다음" 버튼에 연결한 이벤트를 이제 "왼쪽" 및 "오른쪽" 키에 연결할 수 있습니다. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // 왼쪽 화살표 $next.trigger("click"); ) if( code == 37) ( // 오른쪽 화살표 $previous.trigger("click"); ) ));

순수 JS에서는 간단한 .trigger() 메서드 대신에 dispatchEvent()를 사용해야 합니다.

jQuery에서는 다음과 같은 콜백을 만들 수 있습니다.

이 경우 콜백은 현재 슬라이드를 인수로 사용하는 .animate()의 함수입니다. 사용 방법은 다음과 같습니다.

순수 JS에서는:

콜백 함수는 생성자의 두 번째 매개변수로 정의됩니다. 다음과 같이 사용할 수 있습니다.

타사 서버의 응답이 즉각적이지 않을 수 있으므로 프로세스가 진행 중임을 보여주기 위해 로딩 애니메이션을 삽입해야 합니다.

이전 다음

gif 또는 순수 CSS 애니메이션일 수 있습니다.

단계는 다음과 같습니다:
- 외부에서 데이터 요청
- 부트로더 숨기기
- 데이터 분석
- HTML을 구축
- 슬라이드 쇼를 표시
- 슬라이드 쇼 처리

YouTube에서 사용자의 최신 동영상을 선택한다고 가정해 보겠습니다. jQuery:

순수 JavaScript에는 JSON을 가져오는 방법을 만드는 추가 단계가 있습니다.

그런 다음 절차는 비슷합니다.

1. 뛰어난 jQuery 슬라이드쇼

jQuery 기술을 사용한 크고 화려한 슬라이드쇼.

2. jQuery 플러그인 “Scale Carousel”

jQuery를 사용하여 확장 가능한 슬라이드쇼. 자신에게 가장 적합한 슬라이드쇼 크기를 설정할 수 있습니다.

3. jQuery 플러그인 “slideJS”

텍스트 설명이 포함된 이미지 슬라이더입니다.

4. 플러그인 “JSliderNews” 5. CSS3 jQuery 슬라이더

탐색 화살표 위로 마우스를 가져가면 다음 슬라이드의 원형 축소판이 나타납니다.

6. 멋진 jQuery "프레젠테이션 주기" 슬라이더

이미지 로딩 표시기가 있는 jQuery 슬라이더. 자동 슬라이드 변경 기능이 제공됩니다.

7. jQuery 플러그인 “시차 슬라이더”

체적 배경 효과가 있는 슬라이더입니다. 이 슬라이더의 하이라이트는 여러 레이어로 구성된 배경의 움직임이며, 각 레이어는 서로 다른 속도로 스크롤됩니다. 결과는 체적 효과의 모방입니다. 그것은 매우 아름다워 보입니다. 직접 볼 수 있습니다. Opera, Google Chrome, IE 등의 브라우저에서는 효과가 더욱 원활하게 표시됩니다.

8. 신선하고 가벼운 jQuery 슬라이더 “bxSlider 3.0”

데모 페이지의 "예제" 섹션에서 이 플러그인의 가능한 모든 용도에 대한 링크를 찾을 수 있습니다.

9. jQuery 이미지 슬라이더, “slideJS” 플러그인

세련된 jQuery 슬라이더로 프로젝트를 꾸밀 수 있습니다.

10. jQuery 슬라이드쇼 플러그인 “Easy Slides” v1.1

슬라이드쇼 생성을 위한 사용하기 쉬운 jQuery 플러그인입니다.

11. jQuery 슬라이딩 플러그인

다양한 버전의 경량 jQuery 플러그인. 자동 슬라이드 변경 기능이 제공됩니다.

12. 자동 슬라이드 변경 기능이 있는 jQuery CSS 갤러리

방문자가 특정 시간 내에 "앞으로" 또는 "뒤로" 화살표를 클릭하지 않으면 갤러리가 자동으로 스크롤되기 시작합니다.

13. jQuery 슬라이더 “Nivo Slider”

유효한 코드가 포함된 매우 전문적이고 고품질이며 가벼운 플러그인입니다. 다양한 슬라이드 전환 효과를 사용할 수 있습니다.

14. jQuery 슬라이더 “MobilySlider”

신선한 슬라이더. 다양한 이미지 변경 효과를 제공하는 jQuery 슬라이더입니다.

15. jQuery 플러그인 “Slider²”

자동 슬라이드 체인저가 있는 경량 슬라이더.

16. 새로운 자바스크립트 슬라이더

자동 이미지 변경 기능이 있는 슬라이더.

자동 슬라이드 변경으로 슬라이드 쇼를 구현하기 위한 플러그인입니다. 이미지 썸네일을 사용하여 디스플레이를 제어할 수 있습니다.

NivoSlider 플러그인을 사용하는 jQuery CSS 이미지 슬라이더.

19. jQuery 슬라이더 “jShowOff”

콘텐츠 회전을 위한 플러그인입니다. 사용 가능한 세 가지 옵션: 탐색 없음(슬라이드 쇼 형식 자동 변경 포함), 버튼 형태 탐색 있음, 이미지 축소판 형태 탐색 있음.

20. “셔터 효과 포트폴리오” 플러그인

사진작가의 포트폴리오를 디자인하기 위한 새로운 jQuery 플러그인입니다. 갤러리에는 이미지를 바꾸는 흥미로운 효과가 있습니다. 렌즈 셔터 작동과 유사한 효과로 사진이 서로 이어집니다.

21. 경량 자바스크립트 CSS 슬라이더 “TinySlider 2”

자바스크립트와 CSS를 사용하여 이미지 슬라이더를 구현합니다.

22. 멋진 슬라이더 “Tinycircleslider”

세련된 원형 슬라이더. 이미지 사이의 전환은 원주 주위의 빨간색 원 형태로 슬라이더를 드래그하여 수행됩니다. 디자인에 둥근 요소를 사용하면 웹사이트에 완벽하게 들어맞을 것입니다.

23. jQuery를 사용한 이미지 슬라이더

경량 슬라이더 "슬라이더 키트". 슬라이더는 수직 및 수평 등 다양한 디자인으로 제공됩니다. "앞으로" 및 "뒤로" 버튼 사용, 마우스 휠 사용, 슬라이드에서 마우스 클릭 사용 등 다양한 유형의 이미지 간 탐색도 구현됩니다.

24. 미니어처 갤러리 "슬라이더 키트"

갤러리 "슬라이더 키트". 썸네일 스크롤은 수직 및 수평으로 모두 수행됩니다. 이미지 간 전환은 마우스 휠, 마우스 클릭 또는 썸네일 위에 커서를 올리면 수행됩니다.

25. jQuery 콘텐츠 슬라이더 “슬라이더 키트”

jQuery를 사용한 수직 및 수평 콘텐츠 슬라이더.

26. jQuery 슬라이드쇼 “슬라이더 키트”

자동 슬라이드 변경 기능이 있는 슬라이드쇼.

27. 경량 전문 자바스크립트 CSS3 슬라이더

2011년에 만들어진 깔끔한 jQuery 및 CSS3 슬라이더입니다.

축소판이 포함된 jQuery 슬라이드쇼.

29. 간단한 jQuery 슬라이드쇼

탐색 버튼이 있는 슬라이드쇼.

30. 멋진 jQuery "Skitter" 슬라이드쇼

멋진 슬라이드쇼를 만들기 위한 jQuery Skitter 플러그인. 플러그인은 이미지 변경 시 22가지(!) 유형의 다양한 애니메이션 효과를 지원합니다. 두 가지 슬라이드 탐색 옵션(슬라이드 번호 사용 및 축소판 사용)으로 작업할 수 있습니다. 매우 높은 품질의 발견인 데모를 꼭 시청하세요. 사용된 기술: CSS, HTML, jQuery, PHP.

31. 슬라이드쇼 “어색함”

기능적인 슬라이드 쇼. 슬라이드에는 간단한 이미지, 캡션이 있는 이미지, 도구 설명이 있는 이미지, 비디오가 포함될 수 있습니다. 키보드의 화살표, 슬라이드 번호 링크, 왼쪽/오른쪽 키를 사용하여 탐색할 수 있습니다. 슬라이드 쇼는 썸네일이 있는 버전과 없는 버전으로 제공됩니다. 모든 옵션을 보려면 데모 페이지 상단에 있는 데모 #1 - 데모 #6 링크를 따르십시오.

부채를 연상시키는 매우 독창적인 이미지 슬라이더 디자인입니다. 애니메이션 슬라이드 전환. 이미지 간 탐색은 화살표를 사용하여 수행됩니다. 상단에 있는 재생/일시 정지 버튼을 사용하여 켜고 끌 수 있는 자동 변속 기능도 있습니다.

애니메이션 jQuery 슬라이더. 브라우저 창의 크기가 조정되면 배경 이미지의 크기가 자동으로 조정됩니다. 각 이미지에 대해 설명이 포함된 블록이 나타납니다.

34. jQuery와 CSS3를 사용한 “Flux Slider” 슬라이더

새로운 jQuery 슬라이더. 슬라이드를 변경할 때 여러 가지 멋진 애니메이션 효과가 제공됩니다.

35. jQuery 플러그인 “jSwitch”

애니메이션 jQuery 갤러리.

자동 슬라이드 변경 기능을 갖춘 간편한 jQuery 슬라이드쇼입니다.

37. 플러그인 "SlideDeck 1.2.2"의 새 버전

전문 콘텐츠 슬라이더. 자동 슬라이드 변경 옵션과 마우스 휠을 사용하여 슬라이드 사이를 이동하는 옵션이 있습니다.

38. jQuery 슬라이더 “Sudo 슬라이더”

jQuery를 사용한 경량 이미지 슬라이더. 다양한 구현 옵션이 있습니다: 이미지의 수평 및 수직 변경, 슬라이드 번호에 대한 링크 유무, 이미지 캡션 유무, 다양한 이미지 변경 효과. 자동 슬라이드 전환 기능이 있습니다. 모든 구현 예제에 대한 링크는 데모 페이지에서 찾을 수 있습니다.

39. jQuery CSS3 슬라이드쇼

섬네일이 포함된 슬라이드쇼는 자동 슬라이드 변경 모드를 지원합니다.

40. jQuery 슬라이더 “플럭스 슬라이더”

다양한 이미지 변경 효과가 있는 슬라이더입니다.

41. 간단한 jQuery 슬라이더

jQuery를 사용한 세련된 이미지 슬라이더.

안녕하세요 여러분. 코박스가 당신과 함께합니다. 오늘은 순수 자바스크립트를 사용하여 올빼미 사진 갤러리 슬라이더를 만드는 것이 얼마나 쉬운지 보여 드리겠습니다. 시작하자.

먼저 프로젝트 구조를 만들어야 합니다. 예는 다음과 같습니다.

HTML 레이아웃

index.html 파일에서 다음 구조를 생성해야 합니다.

CSS 스타일 #gallery( 너비: 400px; text-align: center; margin: 0 auto; ) .photo( 위치: 상대; 높이: 300px; ) .photo img( 너비: 100%; 위치: 절대; 불투명도: 0; 왼쪽: 0; 전환: 불투명도 1s; ) .photo img.shown( 불투명도: 1; ) .tabs( text-align: center; padding-top: 20px; )

여기서 주목할 만한 주요 사항은 기본적으로 모든 이미지를 투명하게 만든다는 것입니다(불투명도: 0). 그리고 표시된 클래스에 불투명도 속성 1을 추가합니다.

JS 추가 var btn_prev = document.querySelector(".tabs .prev"), btn_next = document.querySelector(".tabs .next"); var 이미지 = document.querySelectorAll(".photo img"); var 나는 = 0; btn_prev.onclick = function())( 이미지[i].className = ""; i = i - 1; if(i = 이미지.길이)( i = 0; ) 이미지[i].className = "표시됨"; ) ;

가장 흥미로운 부분은 다음과 같습니다. 먼저 클릭 이벤트와 사진 세트(btn_prev, btn_next, 이미지)를 첨부할 두 개의 버튼을 초기화합니다. 초기화 후 슬라이더를 스크롤할 버튼에 onclick 이벤트를 발생시킵니다.

이미지[i].className = ""; 여기에서는 표시된 클래스를 클릭하여 모든 사진에서 제거합니다.

i ++ (—) 여기서는 클릭할 때마다 슬라이드 식별자를 변경합니다.

if(i > = Images.length)( i = 0; ) (“앞으로” 버튼을 클릭하기 위한 조건) 마지막 슬라이드가 선택되었을 때 확인하려면 이 조건이 필요합니다. 마지막 슬라이드보다 큰 슬라이드를 선택한 경우 표시기에 0을 할당합니다(자동으로 세트 시작 부분에 놓임).

만약 내가< 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

이미지[i].className = "표시됨"; 여기서는 현재 활성 슬라이드에 표시된 클래스를 추가합니다.

결론

오늘은 네이티브 JS를 사용하여 자체 슬라이더를 만들었습니다. 소스코드를 얻을 수 있습니다. Corvax가 당신과 함께했습니다. 당신의 발전에 행운을 빕니다!