怎么在css+js實現(xiàn)幻燈片上添加文字及旋轉切換-創(chuàng)新互聯(lián)
這篇文章運用簡單易懂的例子給大家介紹怎么在css+js實現(xiàn)幻燈片上添加文字及旋轉切換，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
成都創(chuàng)新互聯(lián)服務項目包括金溪網站建設、金溪網站制作、金溪網頁制作以及金溪網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，金溪網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到金溪省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！下面我們就來一步步實現(xiàn)效果（可以去之前的文章獲取實現(xiàn)幻燈片效果的代碼）。
5、給幻燈片添加文本文字
有很多方法可以解決這個問題，但也許最簡單的方法是在鏈接中添加一些標題屬性，并使用CSS在圖像上顯示它們：
html代碼：
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屬性之外沒有其他任何變化，我們現(xiàn)在已經開始了基本的CTA幻燈片放映，甚至可以將其轉換為對關鍵幀進行一些調整的輪播。
效果圖：
所以，如果你必須有一個主頁幻燈片來取悅那些權力，那就考慮放棄jQuery，就像上面那樣。如果您有任何反饋或問題，請使用下面的按鈕告訴我們。
6、轉換為旋轉木馬切換效果
效果圖（靜態(tài)的，大家可以自己編譯運行，查看效果）：
附上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實現(xiàn)幻燈片上添加文字及旋轉切換就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
網頁名稱：怎么在css+js實現(xiàn)幻燈片上添加文字及旋轉切換-創(chuàng)新互聯(lián)
鏈接URL：http://m.jiaotiyi.com/article/ceeiee.html