[javascript] jQuery를 사용하여 슬라이드 쇼 및 이미지 배너 만들기

01 Dec 2023

javascript

개요

이번 블로그 포스트에서는 jQuery를 사용하여 슬라이드 쇼와 이미지 배너를 만드는 방법에 대해 알아보겠습니다. 이를 통해 웹 페이지에 동적인 요소를 추가하여 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다.

준비물

jQuery 라이브러리

슬라이드 쇼 만들기

HTML 마크업 작성

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 스타일링

.slideshow {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slideshow img {
  width: 100%;
  height: auto;
  display: none;
}

JavaScript(jQuery) 적용

$(document).ready(function() {
  $('.slideshow img:first').addClass('active').show();
  setInterval(function() {
    var active = $('.slideshow img.active');
    var next = active.next().length ? active.next() : $('.slideshow img:first');

    active.fadeOut().removeClass('active');
    next.fadeIn().addClass('active');
  }, 2000);
});

이미지 배너 만들기

HTML 마크업 작성

<div class="banner">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 스타일링

.banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.banner img {
  width: 33.333%;
  height: auto;
  float: left;
}

JavaScript(jQuery) 적용

$(document).ready(function() {
  var bannerWidth = $('.banner img').length * $('.banner img').outerWidth();

  $('.banner').css('width', bannerWidth);

  setInterval(function() {
    $('.banner').animate({ marginLeft: -$('.banner img').outerWidth() }, 1000, function() {
      $(this).css({ marginLeft: 0 }).find('img:last').after($(this).find('img:first'));
    });
  }, 2000);
});

결론

jQuery를 사용하여 슬라이드 쇼와 이미지 배너를 만들 수 있습니다. 이를 통해 웹 페이지에 다양한 동적 요소를 추가하여 사용자들에게 더욱 흥미로운 경험을 제공할 수 있습니다. jQuery를 사용하는 방법에 대해 익숙해지면 다양한 기능을 자유롭게 추가할 수 있으니, 자세한 내용은 jQuery 공식 문서를 참조해 보시기 바랍니다.

개요

준비물

슬라이드 쇼 만들기

이미지 배너 만들기

결론

참고 자료