CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)-CSS 튜토리얼-php.cn

CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)

青灯夜游

풀어 주다： 2018-11-05 17:29:07

원래의

5282명이 탐색했습니다.

이 글의 내용은 CSS로 슬라이드 효과를 구현하는 방법을 소개하는 것인가요? 슬라이드쇼 구현 방법(코드 예시) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

아래에서는 코드를 통해 단계별로 슬라이드 전환(페이드 인 및 아웃) 효과를 구현합니다.

1 html 파일을 만들고 데모를 작성합니다.# 🎜🎜 #

먼저 div 상자에 포함된 페이지의 이미지 목록을 설정해야 합니다. 다음과 같습니다:

<div id="stage">
	<a href="img/CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)"><img  src="img/CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/2.jpg"><img  src="img/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/3.jpg"><img  src="img/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/4.jpg"><img  src="img/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/5.jpg"><img  src="img/5.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/6.jpg"><img  src="img/6.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/7.jpg"><img  src="img/7.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
	<a href="img/8.jpg"><img  src="img/8.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)" ></a>
</div>

로그인 후 복사

이 예에서는 모든 이미지에 링크가 있지만 필수는 아닙니다. 링크를 제거하는 경우 'a' 대신 'img'를 참조하도록 일부 CSS 및 JavaScript를 변경하기만 하면 됩니다.

2. CSS를 사용하여 이미지 오버레이

다음 데모에 사용한 CSS 코드는 다음과 같습니다. #🎜🎜 #

#stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

로그인 후 복사

링크를 위치: 절대로 설정하여 문서 흐름에서 모든 이미지를 꺼내 함께 쌓습니다. 그런 다음 슬라이드 쇼를 위한 페이지 공간을 확보하기 위해 #stage의 너비와 높이를 지정해야 합니다. 이는 이미지 크기에 패딩(각 측면 10px) 및 테두리(각 측면 1px)를 더한 것과 같습니다.

그런 다음 nth-of-type() 선택기를 사용하여 첫 번째 이미지를 스택 맨 위에 배치하고 두 번째 이미지를 스택 뒤에 배치하며 나머지 이미지는 스택에서 숨겨집니다. 표시하다.

마지막으로 상단 이미지에 애니메이션 키프레임을 할당하여 페이드 아웃되기 전에 4초 동안 기다리도록 하고 불투명도:0을 설정합니다. 이제 누락된 것은 다음 이미지가 순서대로 나타나고 페이드 아웃될 수 있도록 마주보는 이미지를 스택의 맨 아래로 이동하는 약간의 JavaScript입니다.

3. JavaScript를 사용하여 효과 실행

여기서 필요한 것은 다음과 같은 경우에 실행되는 이미지에 이벤트 핸들러를 할당하는 것입니다. 키프레임 애니메이션이 종료됩니다. 가장 중요한 사진을 찍어 뒤로 이동합니다.

window.addEventListener("DOMContentLoaded", function(e) {
    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

로그인 후 복사

상단의 새 이미지는 이제 동일하게 키프레임 애니메이션 --fader를 포함하여 n번째 유형(1) 속성을 가정합니다. 다른 이미지로 이동합니다.

바로 그거예요! 비대한 코드, 플러그인, 라이브러리가 없으며 모든 최신 브라우저에서 작동하는 바닐라 JavaScript 몇 줄만 있으면 됩니다.

4. 렌더링:

위 코드를 실행하여 간단한 페이드인 및 페이드아웃 슬라이드쇼를 얻으세요.

# 🎜🎜 #

요약: 위 내용은 이 글에서 구현한 페이드 인 및 페이드 아웃 슬라이드 효과입니다. 직접 사용해 보시고 이해를 깊게 하시면 도움이 되실 것입니다. . CSS로 슬라이드 효과를 얻는 방법은 무엇입니까? 슬라이드쇼 구현 방법(코드 예시)