순수 자바스크립트 모바일 우선 슬라이드쇼 effect_javascript 기술
- WBOY원래의
- 2016-05-16 15:34:091537검색
간단한 튜토리얼
wallop은 모바일 최초의 순수 JavaScript 슬라이드쇼 플러그인입니다. 이 슬라이드쇼 플러그인은 크기가 4K에 불과합니다. HTML 요소에 대한 적절한 클래스를 추가하고 제거하여 이러한 클래스 스타일을 완전히 사용자 정의할 수 있습니다. 기능은 다음과 같습니다:
모바일 우선
애니메이션 및 전환 효과는 CSS를 사용하여 생성됩니다
가볍고, 4K 사이즈만 가능
유연성과 확장성이 뛰어납니다
맞춤형 이벤트 및 API
외부 종속성 없음
사용방법
이 슬라이드쇼 플러그인을 사용하려면 먼저 wallop.css 및 Wallop.min.js 파일을 도입해야 합니다.
<link rel="stylesheet" href="path/to/wallop.css"> <script src="path/to/Wallop.min.js"></script>
HTML 구조
이 슬라이드의 기본 HTML 구조는 다음과 같습니다. 첫 번째 슬라이드에 .Wallop-item--current 클래스를 추가할 수 있습니다.
<div class="Wallop"> <div class="Wallop-list"> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> </div> <button class="Wallop-buttonPrevious">Previous</button> <button class="Wallop-buttonNext">Next</button> </div>
초기화 플러그인
<script>
var wallopEl = document.querySelector('.Wallop');
var slider = new Wallop(wallopEl);
</script>
애니메이션 효과 추가
이 슬라이드쇼 플러그인에는 기본적으로 애니메이션 전환 효과가 없습니다. 애니메이션 효과를 추가해야 하는 경우 해당 wallop-animation.css 파일을 도입하고 요소에 Wallop--xxxx 클래스를 추가해야 합니다. 예를 들어 페이드 효과를 추가하려면:
<head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-fade.css"> </head> <div class="Wallop Wallop--fade"> ... </div>
사용 가능한 애니메이션 유형
이 슬라이드에 사용할 수 있는 전환 애니메이션 유형은 다음과 같습니다.
왈롭-슬라이드
Wallop-페이드
Wallop-규모
왈롭--회전
왈롭-접기
Wallop--수직 슬라이드
위는 내장된 전환 애니메이션 유형 중 일부이며, 자신만의 전환 애니메이션을 사용자 정의할 수도 있습니다.
구성 매개변수
사용 가능한 구성 매개변수는 다음과 같습니다.
ButtonPreviousClass: 'Wallop-buttonPrevious'
버튼NextClass: 'Wallop-buttonNext'
itemClass: 'Wallop-item'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
hidePreviousClass: 'Wallop-item--hidePrevious'
hideNextClass: 'Wallop-item--hideNext'
캐러셀: 사실
방법
Wallop 슬라이드쇼 플러그인은 버튼 제어를 위한 몇 가지 기본 방법을 제공합니다.
이동
지정된 인덱스의 슬라이드로 점프할 수 있습니다.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);
다음
다음 슬라이드로 이동하세요.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到下一个slide
Wallop.next();
이전
이전 슬라이드로 이동합니다.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到前一个slide
Wallop.previous();
이벤트
Wallop은 슬라이드가 바뀔 때마다 이벤트를 발생시키며, 현재 슬라이드의 인덱스와 Wallop 객체가 포함된 세부 객체를 반환합니다.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
Wallop.on('change', function(event) {
// event.detail.wallopEl
// => <div class="Wallop">…</div>
// event.detail.currentItemIndex
// => number
});
위 내용은 여러분에게 공유된 순수 JavaScript 모바일 우선 슬라이드쇼 효과 생성 과정입니다. 더 아름다운 슬라이드쇼 효과를 만드는 데 도움이 되기를 바랍니다.