首頁  >  文章  >  web前端  >  css+js如何在投影片上新增文字?實現幻燈片的旋轉切換(附代碼)

css+js如何在投影片上新增文字?實現幻燈片的旋轉切換(附代碼)

青灯夜游
青灯夜游原創
2018-11-05 17:56:593315瀏覽

這篇文章帶給大家的內容是介紹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;
  }	

除了為我們的連結添加title屬性之外沒有其他任何變化,我們現在已經開始了基本的CTA幻燈片放映,甚至可以將其轉換為關鍵影格進行一些調整的輪播。

效果圖:

css+js如何在投影片上新增文字?實現幻燈片的旋轉切換(附代碼)css+js如何在投影片上新增文字?實現幻燈片的旋轉切換(附代碼)

所以,如果你必須有一個主頁投影片來取悅那些權力,那就考慮放棄jQuery ,就像上面那樣。如果您有任何回饋或問題,請使用下面的按鈕告訴我們。

6、轉換為旋轉木馬切換效果

效果圖(靜態的,大家可以自己編譯運行,查看效果):

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn