Jquery로 캐러셀을 수행하는 방법-프런트엔드 Q&A-php.cn

모바일 장치의 인기로 인해 캐러셀은 많은 웹사이트와 애플리케이션에서 일반적인 기능 중 하나가 되었습니다. jQuery는 다양하고 편리하고 실용적인 방법을 제공하여 캐러셀 개발을 매우 간단하고 쉽게 만드는 널리 사용되는 JavaScript 라이브러리입니다.

다음 단계에서는 jQuery를 사용하여 간단한 회전식 차트를 만드는 방법을 보여줍니다. 먼저 기본적인 HTML과 CSS 코드를 준비해야 합니다.

HTML code

  
 
 
 
  Previous Next

로그인 후 복사

CSS code

.slider { position: relative; height: 300px; width: 600px; overflow: hidden; } .slides { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; flex-wrap: nowrap; transition: transform 0.6s ease; } .slide { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } .slide img { max-height: 100%; max-width: 100%; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; } .controls span { margin: 0 10px; cursor: pointer; }

로그인 후 복사

위의 HTML 코드에는 세 개의 이미지가 포함된 캐러셀이 있습니다. 이미지는img태그에 저장되며 각 이미지는slide클래스 이름이 있는div요소에 래핑됩니다. 캐러셀의 제어 버튼은div요소의 하단에 있으며prev및nextspan을 사용합니다. > 클래스 이름 요소 표현.img标签中，每张图片被包装在一个具有slide类名的div元素中。轮播图的控制按钮在div元素的底部，并且使用具有prev和next类名的span元素表示。

在CSS代码中，我们将轮播图容器的高度和宽度设置为300px和600px，并且设置overflow: hidden以确保只显示一个div元素。所有的slide元素都有相同的高度，并且使用Flex布局在父元素中进行水平布局。控制按钮居中定位，并且使用Flex布局进行水平对齐。

现在我们可以逐步创建轮播图代码。

第一步，我们需要使用jQuery选择轮播图中的相关元素并存储它们的引用，以便在之后的代码中使用。如下所示：

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next');

로그인 후 복사

第二步，我们需要计算每个slide元素的宽度，并将它们排列在一行中。如下所示：

var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px');

로그인 후 복사

第三步，我们需要编写next和prev函数，以便在点击控制按钮时轮播图可以动起来。这里的具体实现涉及到计算偏移量的复杂数学运算，但是可以使用animate()函数来实现。如下所示：

$next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); });

로그인 후 복사

在第四步中，我们需要设置一个循环定时器，以便每隔一段时间自动运行next

CSS 코드에서 캐러셀 컨테이너의 높이와 너비를 300px및 600px로 설정하고 overflow:hidden을 Make로 설정했습니다. 하나의 div요소만 표시되는지 확인하세요. 모든 slide요소는 동일한 높이를 가지며 Flex 레이아웃을 사용하여 상위 요소 내에서 가로로 배치됩니다. 제어 버튼은 Flex 레이아웃을 사용하여 중앙에 배치되고 수평으로 정렬됩니다.

이제 캐러셀 코드를 단계별로 생성할 수 있습니다.

첫 번째 단계에서는 jQuery를 사용하여 캐러셀에서 관련 요소를 선택하고 후속 코드에서 사용할 수 있도록 해당 참조를 저장해야 합니다. 아래와 같이

var interval = setInterval(function() { $next.click(); }, 3000);

로그인 후 복사

두 번째 단계에서는 각 slide요소의 너비를 계산하고 이를 한 줄로 배열해야 합니다. 아래와 같이

$slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

로그인 후 복사

세 번째 단계에서는 컨트롤 버튼을 클릭할 때 캐러셀 이미지가 이동할 수 있도록 next및 prev함수를 작성해야 합니다. 여기서 구체적인 구현에는 오프셋을 계산하기 위한 복잡한 수학적 연산이 포함되지만 animate()함수를 사용하여 구현할 수 있습니다. 아래와 같이:

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next'); var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px'); $next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); }); var interval = setInterval(function() { $next.click(); }, 3000); $slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

로그인 후 복사

네 번째 단계에서는 가끔씩 자동으로 next기능을 실행하도록 루프 타이머를 설정해야 합니다. 아래와 같이 rrreee마지막 단계는 애니메이션 중첩 및 캐러셀 오류를 방지하기 위해 캐러셀 이미지가 움직일 때 사용자가 컨트롤 버튼을 클릭하는 것을 금지하는 것입니다. 아래와 같이 rrreee이제 간단한 캐러셀 차트가 완성되었습니다. 전체 코드 조각은 다음과 같습니다. rrreee위 단계를 완료한 후 자신만의 CSS 스타일과 HTML 코드를 사용하여 캐러셀의 모양과 기능을 맞춤설정하고 웹사이트에 원활하게 통합할 수 있습니다.

위 내용은 Jquery로 캐러셀을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!