슬라이딩 및 불투명도 효과를 사용하여 간단한 jQuery 이미지 슬라이더를 구축하는 방법은 무엇입니까?

슬라이딩 및 불투명도 효과를 사용하여 간단한 jQuery 이미지 슬라이더 구축

외부 플러그인에 의존하지 않고 jQuery에서 사용자 정의 이미지 슬라이더를 생성하면 유연성이 향상됩니다. 그리고 통제. 다음은 슬라이딩 및 불투명 전환 효과를 모두 제공하는 단순화된 접근 방식입니다.

탐색 및 조작을 위한 jQuery 함수

코드를 자세히 살펴보기 전에 두 가지 핵심 jQuery 함수를 이해하는 것이 필수적입니다. :

• index()는 위치를 반환합니다. 형제 요소 내의 요소.
• eq()는 위치(색인 값)를 기준으로 요소를 선택합니다.

불투명도 효과

불투명도 효과에서는 CSS를 사용하여 이미지를 절대적으로 배치하고 겹쳐 놓습니다. 트리거 요소를 클릭하면 jQuery의 fadeIn() 및 fadeOut() 함수

에 따라 해당 이미지가 페이드 인되고 다른 이미지는 페이드 아웃됩니다. 슬라이딩 효과

슬라이딩 효과를 위해 이중 래퍼와 마스크 기법을 사용합니다. 이미지는 마스크된 영역 내부에 배치되고 그 위로 마스크를 밀어 특정 이미지가 드러나 슬라이딩 전환 효과를 줍니다.

일반적인 jQuery 응답

불투명도 및 슬라이딩 효과는 모두 트리거(탐색 요소), 다음/이전 클릭 이벤트 및 자동 타이밍을 처리하는 공통 jQuery 응답을 공유합니다. 전환.

HTML 구조

<ul class="images">
    <li>
        <img src="images/1.jpg" alt="1" />
    </li>
    <li>
        <img src="images/2.jpg" alt="2" />
    </li>
    ...
</ul>

<ul class="triggers">
    <li>1</li>
    <li>2</li>
    ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

불투명도 효과 코드

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

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');
}

슬라이딩 효과 코드

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
/* this width must be total of the images, it comes from jquery */
    ul.images li { float:left; }

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() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

이 코드베이스는 슬라이딩 및 불투명도 전환 효과를 갖춘 완전한 기능의 jQuery 이미지 슬라이더를 제공합니다. CSS 및 다양한 jQuery 기능을 통해 사용자 정의 가능

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