> 웹 프론트엔드 > CSS 튜토리얼 > CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)

CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)

青灯夜游
풀어 주다: 2018-11-05 17:57:38
원래의
3374명이 탐색했습니다.

이 글의 내용은 CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법을 소개하는 것입니다. 슬라이드 회전 전환을 구현합니다(코드 첨부). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글에서 [CSS에서 슬라이드 효과를 어떻게 구현하나요? 슬라이드쇼 구현 방법 ]에서는 페이드인 및 페이드아웃 슬라이드를 구현하는 방법을 소개합니다. 이를 바탕으로 슬라이드에 텍스트를 추가하는 방법과 슬라이드에서 다른 텍스트를 전환할 수 있는 방법을 설명합니다. 페이드아웃 효과를 캐러셀 전환 효과로 변환하는 방법(코드 첨부)

효과를 단계별로 구현해 보겠습니다(슬라이드 효과 을 달성하려면 이전 기사로 이동하여 에 대한 코드를 얻을 수 있습니다).

5. 슬라이드에 텍스트 추가

이 문제를 해결하는 방법은 여러 가지가 있지만 아마도 가장 쉬운 방법은 링크에 제목 속성을 추가하고 CSS 표시를 사용하는 것입니다. 이미지에 있는 내용:

html 코드:

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/2.jpg" title="图片2"><img  src="img/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" title="图片3"><img  src="img/CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/4.jpg" title="图片4"><img  src="img/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/5.jpg" title="图片5"><img  src="img/5.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/6.jpg" title="图片6"><img  src="img/6.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/7.jpg" title="图片7"><img  src="img/7.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/8.jpg" title="图片8"><img  src="img/8.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
</div>
로그인 후 복사

css 코드:

#stage a::after {
    position: absolute;
    left: 11px;
    bottom: 11px;
    padding: 2px 0;
    width: calc(100% - 22px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }	
로그인 후 복사

링크에 제목 속성을 추가하는 것 외에는 아무것도 없습니다. 이제 기본 CTA 슬라이드 쇼로 시작했으며 키프레임을 일부 조정하여 슬라이드 쇼로 변환할 수도 있습니다.

렌더링:

CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)

그래서 홈페이지 슬라이드쇼가 있어야 한다면 그렇다면 위와 같이 jQuery를 버리는 것을 고려해 보세요. 피드백이나 질문이 있는 경우 아래 버튼을 사용하여 알려주시기 바랍니다.

6. 캐러셀 전환 효과로 변환

Rendering(정적, 직접 컴파일하고 실행하여 효과를 확인할 수 있음):

#🎜 🎜#

CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)

첨부된 css+js 코드(html 코드는 위와 같습니다):

css 코드:

#stage {
    margin: 1em auto;
    width: 640px;
    height: 400px;
    border: 10px solid #000;
    overflow: hidden;
  }
  #stage a {
    position: relative;
    display: inline-block;
  }
 #stage a::after {
    position: absolute;
    left: 11px;
    bottom: 11px;
    padding: 2px 0;
    width: calc(100% - 22px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }

  #stage a:nth-of-type(2) {
    left: 640px;
    top: -50%;
    animation-name: slider;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0,1.5,0.5,1);
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes slider {
    from { transform: translateY(-50%) rotate(30deg); left: 360px; }
    to   { transform: translateY(-50%); left: 0px; }
  }
로그인 후 복사

js 코드: # 🎜🎜#

window.addEventListener("DOMContentLoaded", function(e) {

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

  }, false);
로그인 후 복사

완료되었습니다. 직접 컴파일하여 효과를 확인할 수 있습니다!


요약: 위 내용은 모두 이 글에서 소개한 내용이며, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿