페이드 또는 슬라이드 효과를 사용하여 간단한 jQuery 이미지 슬라이더를 구축하는 방법은 무엇입니까?

슬라이딩 또는 불투명도 효과를 사용하여 간단한 jQuery 이미지 슬라이더를 만드는 방법

많은 개발자는 크기가 크거나 기존 JavaScript와 충돌할 가능성이 있습니다. 자신만의 슬라이더를 만드는 것을 선호하는 사람들을 위해 jQuery를 사용하는 간단한 접근 방식은 다음과 같습니다.

주요 jQuery 기능:

• index(): 형제 내 요소의 위치를 ​​반환합니다. elements.
• eq(): 위치에 따라 요소를 선택합니다.

접근법:

• 선택한 트리거 요소의 인덱스를 검색합니다.
• 이것을 일치시킵니다. eq() 메서드를 사용하여 해당 이미지로 색인을 생성합니다.

1. 페이드인/페이드아웃 효과

HTML:

<ul class="images">
  ...
</ul>

<ul class="triggers">
  ...
</ul>

CS S:

ul.images { position:relative; }
ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

2. 슬라이딩 효과

HTML:

FadeIn/FadeOut과 동일 effect.

CSS:

.mask { ... }
ul.images { ... }
ul.images li { ... }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

두 가지 모두에 대한 공유 jQuery 응답 슬라이더:

triggers.click(function() { ... });
$('.next').click(function() { ... });
$('.prev').click(function() { ... });
function sliderTiming() { ... }
function resetTiming() { ... }

위 내용은 페이드 또는 슬라이드 효과를 사용하여 간단한 jQuery 이미지 슬라이더를 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!