首頁  >  文章  >  web前端  >  css如何實現幻燈片效果?投影片的實作方法(程式碼範例)

css如何實現幻燈片效果?投影片的實作方法(程式碼範例)

青灯夜游
青灯夜游原創
2018-11-05 17:29:075231瀏覽

這篇文章帶給大家的內容是介紹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如何實現幻燈片效果?投影片的實作方法(程式碼範例)

總結:以上就是這篇文章所實現的淡入淡出幻燈片效果,大家可以自己動手試試,加深理解,希望能對大家的學習有所幫助。

以上是css如何實現幻燈片效果?投影片的實作方法(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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