CSS+JSを使ってスライドにテキストを追加するにはどうすればよいですか?スライドの回転切り替えを実装（コード添付）

この記事の内容は、css jsでスライドに文字を追加する方法を紹介するというものです。スライドの回転切り替えを実装します(コード付属)。困っている友人は参考にしていただければ幸いです。

前回の記事では[cssでスライド効果を実現するには？スライドショーの実装方法 ] でスライドのフェードインとフェードアウトを実現する方法を紹介し、スライド上にテキストを追加し、スライドとフェードで異なるテキストを切り替える方法を説明します。 in と out エフェクトをカルーセル切り替えエフェクトに変換するメソッド (コードは添付されています)。

効果を段階的に実装してみましょう (前の記事にアクセスして、スライド効果を実現するための コードを入手できます )。

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;
  }	

リンクに title 属性を追加すること以外は変更なし。基本的な CTA から始めました。スライドショーや、キーフレームを調整してカルーセルに変換することもできます。

レンダリング:

したがって、権力者を満足させるためにホームページのスライドショーが必要な場合は、次のような jQuery を廃止することを検討してください。その上。ご意見やご質問がございましたら、下のボタンを使用してお知らせください。

6. カルーセル切り替え効果への変換

レンダリング (静的、自分でコンパイルして実行して効果を確認できます):

## 添付の 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 中国語 Web サイトの他の関連記事を参照してください。