JavaScript와 CSS로 구현한 간단한 캐러셀 이미지 재생 효과 (소스코드 첨부)

회전목마 이미지는 종종 관심의 중심이 되며, 사진 갤러리에서 사용되거나 많은 현대 웹사이트에서 큰 중심 무대를 차지합니다. 과거에는 Adobe Flash가 CSS3 및 JavaScript 작업을 위해 종종 선택되는 도구였지만 캐러셀은 많은 코딩 없이 쉽게 구현할 수 있습니다.

여기서 사용하는 기술은 표준 JavaScript 및 CSS3를 사용하여 멋진 크로스페이드 전환이 가능한 간단한 캐러셀을 구현하는 가장 쉬운 방법 중 하나입니다.

기본 HTML은 쉽지 않습니다. 몇 개의 이미지를 div 컨테이너에 넣으세요:

<div class="slides">
  <img src="image/cup.jpg" >
  <img src="image/flower.jpg">
  <img src="image/flowers.jpg">
  <img src="image/strawberry.jpg">
  <img src="image/greatwall.jpg">
</div>

CSS를 사용하여 컨테이너 내부에 모든 이미지를 쌓고 전환을 정의하세요(전환을 위해 브라우저별 접두사를 사용해야 할 수도 있음):

/* the slide container with a fixed size */
.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  }
  /* the images are positioned absolutely to stack. opacity transitions are animated. */
  .slides img { 
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width: 100%;
  }
  /* the first image is the current slide. it's faded in. */
  .slides img:first-child { 
  z-index: 2; 
  /* frontmost */
  opacity: 1;
  }
  /* the last image is the previous slide. it's behind the current slide and it's faded over. */
  .slides img:last-child {
  z-index: 1; 
  /* behind current slide */
  opacity: 1;
  }

이 간단한 설정 후에 남은 것은 캐러셀의 순서를 변경하여 캐러셀을 진행하는 것뿐입니다. 다음 코드 조각은 첫 번째 이미지(현재 그림)를 주기적으로 컨테이너 끝으로 이동하여 다음 이미지를 현재 그림으로 만듭니다. 위에 정의된 CSS 규칙으로 인해 변경 사항은 크로스페이드로 애니메이션화됩니다.

function nextSlide() {
    var q = function(sel) {
     return document.querySelector(sel); 
     }   
    q(".slides").appendChild(q(".slides img:first-child"));
    }
    setInterval(nextSlide, 3000)

위는 단계에 대한 분석입니다. 다음은 전체 코드입니다

	
	
	


<div class="slides">
  <img src="image/cup.jpg" >
  <img src="image/flower.jpg">
  <img src="image/flowers.jpg">
  <img src="image/strawberry.jpg">
  <img src="image/greatwall.jpg">
</div>

효과는 다음과 같습니다. #

#🎜🎜 #

위 내용은 JavaScript와 CSS로 구현한 간단한 캐러셀 이미지 재생 효과 (소스코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!