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

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

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

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

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

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

html 코드:

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/2.jpg" title="图片2"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" title="图片3"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/4.jpg" title="图片4"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/5.jpg" title="图片5"><img  src="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/6.jpg" title="图片6"><img  src="/static/imghw/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/7.jpg" title="图片7"><img  src="/static/imghw/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSS+JS를 사용하여 슬라이드에 텍스트를 추가하는 방법은 무엇입니까? 슬라이드 회전전환 구현(코드첨부)" ></a>
	<a href="img/8.jpg" title="图片8"><img  src="/static/imghw/default1.png"  data-src="img/8.jpg"  class="lazy"      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 슬라이드 쇼로 시작했으며 키프레임을 일부 조정하여 슬라이드 쇼로 변환할 수도 있습니다.

렌더링:

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

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

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

#🎜 🎜#

첨부된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!