怎么在css+js實現幻燈片上添加文字及旋轉切換

這篇文章運用簡單易懂的例子給大家介紹怎么在css+js實現幻燈片上添加文字及旋轉切換，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

下面我們就來一步步實現效果（可以去之前的文章獲取實現幻燈片效果的代碼）。

5、給幻燈片添加文本文字

有很多方法可以解決這個問題，但也許最簡單的方法是在鏈接中添加一些標題屬性，并使用CSS在圖像上顯示它們：

html代碼：

<div id="stage">
	<a href="img/1.jpg" title="圖片1"><img src="img/1.jpg" width="640" height="400"></a>
	<a href="img/2.jpg" title="圖片2"><img src="img/2.jpg" width="640" height="400"></a>
	<a href="img/3.jpg" title="圖片3"><img src="img/3.jpg" width="640" height="400"></a>
	<a href="img/4.jpg" title="圖片4"><img src="img/4.jpg" width="640" height="400"></a>
	<a href="img/5.jpg" title="圖片5"><img src="img/5.jpg" width="640" height="400"></a>
	<a href="img/6.jpg" title="圖片6"><img src="img/6.jpg" width="640" height="400"></a>
	<a href="img/7.jpg" title="圖片7"><img src="img/7.jpg" width="640" height="400"></a>
	<a href="img/8.jpg" title="圖片8"><img src="img/8.jpg" width="640" height="400"></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實現幻燈片上添加文字及旋轉切換就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。