這篇文章帶給大家的內容是介紹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幻燈片放映，甚至可以將其轉換為關鍵影格進行一些調整的輪播。
效果圖：
所以，如果你必須有一個主頁投影片來取悅那些權力，那就考慮放棄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中文網其他相關文章！
