집 > 기사 > 웹 프론트엔드 > 자바스크립트 CSS에서 이미지 캐러셀 블록을 설정하는 방법

자바스크립트 CSS에서 이미지 캐러셀 블록을 설정하는 방법

PHPz원래의: 2023-04-21 15:16:30147검색

인터넷의 지속적인 발전으로 이미지 캐러셀은 웹사이트 디자인 및 개발에서 중요한 부분이 되었습니다. 이 글에서는 JavaScript와 CSS를 사용하여 이미지 캐러셀을 만드는 방법을 다룹니다.

먼저 캐러셀의 모양을 설정하려면 HTML 템플릿과 일부 CSS가 필요합니다.

<code class="html"><div class="slider-container">
   <div class="slider-wrapper">
      <div class="slider-slide">
         <img src="image1.jpg">
      </div>
      <div class="slider-slide">
         <img src="image2.jpg">
      </div>
      <div class="slider-slide">
         <img src="image3.jpg">
      </div>
      <div class="slider-slide">
         <img src="image4.jpg">
      </div>
   </div>
   <button class="slider-prev">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div></code>

이 HTML 템플릿에서는 별도의 슬라이드쇼로 이미지가 포함된 <div> 요소를 사용합니다. 모든 슬라이드가 포함된 상위 요소에 이러한 슬라이드를 배치하겠습니다. 하단에는 슬라이드쇼를 제어하는 두 개의 "이전" 및 "다음" 버튼도 있습니다. <div>元素作为一个单独的幻灯片。我们将把这些幻灯片放在一个包含所有幻灯片的父元素中。在底部，我们还有两个控制幻灯片的“prev”和“next”按钮。

接下来，我们将使用CSS来设置这个幻灯片的UI。

<code class="css">.slider-container {
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
}

.slider-wrapper {
   display: flex;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: transform 0.5s ease;
}

.slider-slide {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.slider-slide img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.slider-prev,
.slider-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   font-size: 20px;
   border: none;
   cursor: pointer;
   opacity: 0.5;
   transition: opacity 0.2s ease;
}

.slider-next {
   right: 20px;
}

.slider-prev {
   left: 20px;
}

.slider-prev:hover,
.slider-next:hover {
   opacity: 0.8;
}</code>

在这个CSS中，我们首先设置了包含轮播的<div>

다음으로 CSS를 사용하여 이 슬라이드쇼의 UI를 설정하겠습니다.

<code class="javascript">var sliderWrapper = document.querySelector('.slider-wrapper');
var slides = document.querySelectorAll('.slider-slide');
var prevBtn = document.querySelector('.slider-prev');
var nextBtn = document.querySelector('.slider-next');
var slideIndex = 0;

function moveSlides() {
   sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)";
}

nextBtn.addEventListener('click', function() {
   if (slideIndex >= slides.length - 1) {
      slideIndex = 0;
   } else {
      slideIndex++;
   }
   moveSlides();
});

prevBtn.addEventListener('click', function() {
   if (slideIndex <= 0) {
      slideIndex = slides.length - 1;
   } else {
      slideIndex--;
   }
   moveSlides();
});</code>

이 CSS에서는 먼저 캐러셀을 포함하는 <div> 요소의 위치와 크기를 설정합니다. 그런 다음 슬라이더 래퍼에서 각 슬라이드의 위치와 크기를 설정합니다. 여기서의 비결은 이미지를 중앙에 배치할 수 있도록 각 슬라이드를 플렉스 컨테이너로 만드는 것입니다.

마지막으로 "이전" 및 "다음" 버튼의 위치, 스타일 및 기능을 설정합니다.

이제 캐러셀 슬라이드쇼의 모양과 UI가 설정되었으므로 JavaScript를 사용하여 몇 가지 로직을 추가해야 합니다.

<code class="javascript">var sliderInterval = setInterval(function() {
   if (slideIndex >= slides.length - 1) {
      slideIndex = 0;
   } else {
      slideIndex++;
   }
   moveSlides();
}, 5000);

sliderWrapper.addEventListener('mouseenter', function() {
   clearInterval(sliderInterval);
});

sliderWrapper.addEventListener('mouseleave', function() {
   sliderInterval = setInterval(function() {
      if (slideIndex >= slides.length - 1) {
         slideIndex = 0;
      } else {
         slideIndex++;
      }
      moveSlides();
   }, 5000);
});</code>

이 코드는 슬라이드와 버튼 요소를 선택하고 슬라이드가 앞으로 또는 뒤로 이동할 수 있도록 클릭 동작을 추가합니다. 각 버튼 클릭은 자체 이벤트 리스너에 의해 처리됩니다. 클릭 이벤트에서는 먼저 슬라이드가 마지막 슬라이드에 도달했는지 확인하고, 그렇다면 슬라이드 인덱스를 0으로 재설정합니다. 그렇지 않은 경우 슬라이드 하나를 앞이나 뒤로 이동하고 moveSlides() 함수를 호출하여 슬라이드 그룹 간에 전환하면 됩니다.

마지막으로 사용자 개입 없이 슬라이드를 자동으로 회전하는 자동 회전 기능을 추가해야 합니다.

<code class="html"><div class="slider-container">
   <div class="slider-wrapper">
      <div class="slider-slide">
         <img src="image1.jpg">
      </div>
      <div class="slider-slide">
         <img src="image2.jpg">
      </div>
      <div class="slider-slide">
         <img src="image3.jpg">
      </div>
      <div class="slider-slide">
         <img src="image4.jpg">
      </div>
   </div>
   <button class="slider-prev">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div>

<style>
    .slider-container {
       position: relative;
       width: 100%;
       height: 500px;
       overflow: hidden;
    }
    
    .slider-wrapper {
       display: flex;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       transition: transform 0.5s ease;
    }
    
    .slider-slide {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    
    .slider-slide img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
    }
    
    .slider-prev,
    .slider-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: rgba(0, 0, 0, 0.5);
       color: white;
       font-size: 20px;
       border: none;
       cursor: pointer;
       opacity: 0.5;
       transition: opacity 0.2s ease;
    }
    
    .slider-next {
       right: 20px;
    }
    
    .slider-prev {
       left: 20px;
    }
    
    .slider-prev:hover,
    .slider-next:hover {
       opacity: 0.8;
    }  
</style>

<script>
    var sliderWrapper = document.querySelector('.slider-wrapper');
    var slides = document.querySelectorAll('.slider-slide');
    var prevBtn = document.querySelector('.slider-prev');
    var nextBtn = document.querySelector('.slider-next');
    var slideIndex = 0;

    function moveSlides() {
       sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)";
    }

    nextBtn.addEventListener('click', function() {
       if (slideIndex >= slides.length - 1) {
          slideIndex = 0;
       } else {
          slideIndex++;
       }
       moveSlides();
    });

    prevBtn.addEventListener('click', function() {
       if (slideIndex <= 0) {
          slideIndex = slides.length - 1;
       } else {
          slideIndex--;
       }
       moveSlides();
    });

    var sliderInterval = setInterval(function() {
       if (slideIndex >= slides.length - 1) {
          slideIndex = 0;
       } else {
          slideIndex++;
       }
       moveSlides();
    }, 5000);

    sliderWrapper.addEventListener('mouseenter', function() {
       clearInterval(sliderInterval);
    });

    sliderWrapper.addEventListener('mouseleave', function() {
       sliderInterval = setInterval(function() {
          if (slideIndex >= slides.length - 1) {
             slideIndex = 0;
          } else {
             slideIndex++;
          }
          moveSlides();
       }, 5000);
    });
</script></code>

여기에서는 슬라이드를 5초 간격으로 자동으로 앞으로 이동시키는 setInterval 함수를 사용합니다. 또한 사용자가 슬라이드 위로 마우스를 가져갈 때 자동 캐러셀을 중지하고 실행하기 위해 mouseover 및 mouseout 이벤트 리스너를 추가했습니다.

자, 이미지 캐러셀의 디자인과 개발이 완료되었습니다. 최종 코드는 다음과 같습니다. 🎜rrreee🎜 이제 이 코드를 로컬 파일에 복사하고 슬라이드쇼 이미지와 경로를 자신의 콘텐츠로 바꾸면 아름다운 JavaScript 및 CSS 이미지 캐러셀이 생성됩니다. 🎜

위 내용은 자바스크립트 CSS에서 이미지 캐러셀 블록을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Eclipse 자바스크립트 리소스 삭제다음 기사：Eclipse 자바스크립트 리소스 삭제