jquery에서 스크롤 막대를 사용하여 그림 슬라이딩 구성 요소를 구현하는 방법

jQuery는 JavaScript 프로그래밍의 복잡성을 단순화하는 널리 사용되는 JavaScript 라이브러리입니다. 스크롤 바는 웹사이트에서 흔히 사용되는 요소입니다. jQuery를 사용하여 스크롤 바가 있는 그림 슬라이딩 컴포넌트를 쉽게 구현할 수 있습니다. 이 글에서는 이 기능을 구현하는 방법을 소개합니다.

먼저 jQuery 라이브러리를 소개해야 합니다. jQuery 공식 홈페이지에서 최신 버전의 라이브러리 파일을 다운로드하거나 CDN(Content Delivery Network) 링크를 이용할 수 있습니다. 여기서는 CDN 링크를 사용하여 jQuery 라이브러리를 로드합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

다음으로 스크롤 막대의 스타일을 정의하기 위한 몇 가지 스타일이 필요합니다. 여기서는 CSS를 사용하여 스크롤 막대의 스타일을 정의합니다. 이 기사의 뒷부분에서 언급할 일부 클래스 이름이 여기에 사용된다는 점에 유의해야 합니다. 이러한 클래스 이름을 변경하려면 해당 코드도 동시에 변경해야 합니다.

.scroll-box {
  overflow: hidden; /* 隐藏滚动条 */
  position: relative;
}

.scroll-box .scroll-content {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.scroll-box .scroll-bar {
  background-color: #ccc;
  border-radius: 10px;
  cursor: pointer;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  z-index: 1;
}

.scroll-box .scroll-bar .thumb {
  background-color: #999;
  border-radius: 5px;
  height: 50px;
  left: -10px;
  position: absolute;
  top: 0;
  width: 28px;
}

다음으로 이미지 영역, 스크롤 막대 영역 및 슬라이더를 정의하는 HTML 구조가 필요합니다.

<div class="scroll-box">
  <div class="scroll-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
    <img src="image7.jpg" alt="Image 7">
    <img src="image8.jpg" alt="Image 8">
  </div>
  <div class="scroll-bar">
    <div class="thumb"></div>
  </div>
</div>

위 코드에서는 "scroll-box" 클래스 이름을 사용하여 이미지와 스크롤 막대를 포함하는 컨테이너를 정의하고 "scroll-content" 클래스 이름을 사용하여 이미지 영역을 정의하며 "scroll-bar" 클래스 이름을 사용합니다. 클래스 이름 스크롤 막대 영역을 정의하려면 "thumb" 클래스 이름을 사용하여 슬라이더를 정의합니다.

다음으로 이미지 스크롤을 구현하려면 JavaScript 코드가 필요합니다. 이 작업을 수행하기 전에 스크롤하는 데 필요한 거리를 계산하기 위해 각 이미지의 너비를 정의해야 합니다. 여기서는 이미지 너비를 300픽셀로 설정했습니다.

.scroll-box .scroll-content img {
  display: inline-block;
  width: 300px;
}

이제 JavaScript 코드 작성을 시작할 수 있습니다. 먼저 슬라이더의 높이를 계산해야 합니다. 높이는 이미지 컨테이너 높이와 콘텐츠 영역 높이의 비율을 기준으로 계산됩니다. 슬라이더의 높이를 80픽셀로 설정했습니다(필요한 경우 변경 가능).

var content_height = $('.scroll-content').height();
var container_height = $('.scroll-box').height();
var thumb_height = container_height / content_height * container_height;
$('.thumb').css('height', thumb_height);

다음으로 사용자의 스크롤에 응답하여 슬라이더의 드래그 이벤트를 바인딩해야 합니다. 사용자가 슬라이더를 드래그하면 이미지 콘텐츠 영역이 위나 아래로 이동하고 슬라이더의 위치가 업데이트됩니다.

var is_drag = false;
var start_y = 0;
var start_top = 0;
$('.thumb').mousedown(function(e) {
  is_drag = true;
  start_y = e.pageY;
  start_top = parseInt($(this).css('top'));
});

$(document).mousemove(function(e) {
  if (is_drag) {
    var diff = e.pageY - start_y;
    var thumb_top = start_top + diff;
    var max_top = container_height - thumb_height;
    if (thumb_top < 0) {
      thumb_top = 0;
    }
    if (thumb_top > max_top) {
      thumb_top = max_top;
    }
    var scroll_top = thumb_top / max_top * (content_height - container_height);
    $('.scroll-content').css('top', -scroll_top);
    $('.thumb').css('top', thumb_top);
  }
});

$(document).mouseup(function() {
  is_drag = false;
});

위 코드에서는 마우스 다운, 마우스 이동, 마우스 업 이벤트를 바인딩했습니다. 마우스를 누르면 "is_drag" 변수를 true로 설정하여 사용자가 슬라이더를 드래그하고 있음을 나타내고 현재 마우스 위치와 슬라이더 위치를 저장합니다. 마우스가 움직이면 마우스 이동 거리에 따라 슬라이더의 새 위치와 이미지 콘텐츠 영역의 새 위치를 계산한 다음 슬라이더와 이미지 콘텐츠 영역의 위치를 ​​업데이트합니다. 마지막으로 마우스를 떼면 "is_drag" 변수를 false로 설정하여 사용자가 드래그를 중단했음을 나타냅니다.

이제 jQuery 이미지 스크롤바 구성 요소를 구현했습니다. 이 구성 요소를 사용하면 사용자는 슬라이더를 사용하여 이미지를 쉽게 스크롤할 수 있으므로 사용자 경험과 유용성이 크게 향상됩니다.

위 내용은 jquery에서 스크롤 막대를 사용하여 그림 슬라이딩 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!