這篇文章帶給大家的內容是介紹css如何達成投影片效果？投影片的實作方法（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
下面我們就透過程式碼來一步步實現幻燈片切換（淡入淡出）的效果：
1、建立html文件，寫demo
首先我們要在頁面上設定圖片列表，包含在div盒子中。類似於以下內容：
<div id="stage">
<a href="img/css如何實現幻燈片效果？投影片的實作方法（程式碼範例）"><img src="img/css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/2.jpg"><img src="img/2.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/3.jpg"><img src="img/3.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/4.jpg"><img src="img/4.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/5.jpg"><img src="img/5.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/6.jpg"><img src="img/6.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/7.jpg"><img src="img/7.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
<a href="img/8.jpg"><img src="img/8.jpg" style="max-width:90%" style="max-width:90%" alt="css如何實現幻燈片效果？投影片的實作方法（程式碼範例）" ></a>
</div>
登入後複製
在此範例中，所有圖像都有鏈接，但這不是必需的。如果你刪除鏈接，你只需要改變一些CSS和JavaScript來引用'img'而不是'a'。
2、使用CSS來疊加圖像
以下是我們用於以下示範的CSS程式碼：
#stage {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}登入後複製
透過將連結設置為position：absolute，我們將所有影像從文件流中取出並將它們堆疊在一起。然後，我們需要為#stage指定寬度和高度， 以便為投影片顯示在頁面上保留空間。這等於圖像尺寸加上填充（每邊10px）和邊框（每邊1px）。
然後，我們使用一些nth-of-type()選擇器將第一個圖像放在堆疊頂部，第二個圖像放在堆疊的後面，其餘圖像隱藏在顯示器之外。
最後，我們將動畫關鍵影格分配給頂部圖像，告訴它在設定opacity:0，淡出之前等待4秒。現在所缺少的只是一點JavaScript來將面對的影像移到堆疊的底部，以便下一個影像可以依序顯示和淡出。
3、使用JavaScript來觸發效果
這裡需要的只是為keyframe 動畫結束時觸發的圖像分配事件處理程序。它需要最重要的照片，並把它移到後面：
window.addEventListener("DOMContentLoaded", function(e) {
var stage = document.getElementById("stage");
var fadeComplete = function(e) { stage.appendChild(arr[0]); };
var arr = stage.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);登入後複製
最上面的新圖像現在假設為nth-of-type(1)屬性，包括關鍵幀動畫--fader，依此類推其他圖像。
就是這樣！沒有臃腫的程式碼，沒有插件，沒有函式庫，只有幾行vanilla JavaScript可以在所有現代瀏覽器中使用。
4、效果圖：
執行以上程式碼就可以獲得一個簡單的淡入淡出投影片：
總結：以上就是這篇文章所實現的淡入淡出幻燈片效果，大家可以自己動手試試，加深理解，希望能對大家的學習有所幫助。
以上是css如何實現幻燈片效果？投影片的實作方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
