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

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

사전 빌드된 플러그인을 사용하는 것이 편리할 수 있지만 불필요한 추가를 추가할 수도 있습니다. 가중치를 부여하고 기존 코드와의 잠재적인 충돌을 유발합니다. 이 문서에서는 간단하고 사용자 정의 가능한 jQuery 이미지 슬라이더를 처음부터 만드는 방법을 보여줍니다.

jQuery 기본

진행하기 전에 두 가지 주요 jQuery 기능을 이해하는 것이 중요합니다.

• index()는 jQuery 객체에 있는 첫 번째 요소의 위치를 ​​반환합니다. siblings.
• eq()는 인덱스 값을 기준으로 요소를 선택합니다.

슬라이더 효과

이 슬라이더는 불투명도와 슬라이딩을 모두 지원합니다. 효과:

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

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>

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과 동일 효과

CSS:

.mask {
  float: left;
  margin: 40px;
  width: 270px;
  height: 266px;
  overflow: hidden;
}
ul.images {
  position: relative;
  top: 0px;
  left: 0px;
}
/* This width must be the total width of the images, calculated with jQuery. */
ul.images li {
  float: left;
}

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() {
  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 이미지 슬라이더를 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!