如何透過3個簡單的步驟構建javascript幻燈片

今天我將向您展示如何從頭開始構建Javascript幻燈片--讓我們開始吧！...

如果你讀過我們的網站**指南，你可能想知道下一步該怎麼做才能提高你的技能。**照片幻燈片是一項非常簡單的任務，它可以教會你獲得編程工作所需的寶貴技能。

今天我將向您展示如何從頭開始構建JavaScript幻燈片。我們直接跳進去！

先決條件

在開始編寫代碼之前，您需要知道一些事情。除了您選擇的合適的web瀏覽器和文本編輯器（我推薦Sublime text），您還需要一些HTML、CSS、JavaScript和jQuery方面的經驗。

如果你對自己的技能不太自信，請確保閱讀了我們的指南，使用文檔對象模型和這些技巧來學習CSS。如果您對JavaScript很有信心，但從未使用過jQuery，那麼請查看我們的jQuery基本指南。

1入門

此幻燈片需要幾個功能：

支持圖像
更改圖像的控件
文本標題
自動模式

這似乎是一個簡單的功能列表。自動模式將自動將圖像前進到序列中的下一個圖像。以下是我在編寫任何代碼之前所做的粗略草圖：

如果你想知道為什麼要費心計劃，那麼看看這些歷史上最嚴重的編程錯誤。這個項目不會讓任何人喪命，但在編寫更大的代碼之前，對代碼和規劃過程有一個紮實的瞭解是至關重要的——即使它只是一個粗略的草圖。

這是您開始使用的初始HTML。將其保存到具有適當名稱的文件中，例如索引.html:

<!DOCTYPE html><html> <head> <style> </style> <title>MUO Slideshow</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> </script> </head> <body> <div id="showContainer"> <div class="imageContainer" id="im_1"> <img src="Images/1.jpg" /> <div class="caption"> Windmill </div> </div> <div class="imageContainer" id="im_2"> <img src="Images/2.jpg" /> <div class="caption"> Plant </div> </div> <div class="imageContainer" id="im_3"> <img src="Images/3.jpg" /> <div class="caption"> Dog </div> </div> <div class="navButton" id="previous">❮</div> <div class="navButton" id="next">❯</div> </div> </body></html>

代碼如下：

有點垃圾，不是嗎？先把它分解再改進。

此代碼包含“標準”HTML、head、style、script和body標記。這些部分是任何網站的重要組成部分。JQuery是通過GoogleCDN包含的——到目前為止沒有什麼獨特或特別的。

主體內部是一個id為showContainer的div。這是用於存儲幻燈片的包裝或外部容器。稍後將使用CSS對此進行改進。在這個容器中，有三塊代碼，每一塊都有相似的用途。

父類定義為imageContainer的類名稱：

它用於存儲一張幻燈片--圖像和標題存儲在此容器中。每個容器都有一個唯一的id，由字符im\和一個數字組成。每個容器都有不同的編號，從1到3。

最後一步，引用圖像，並將標題存儲在具有caption類的div中：

我用數字文件名創建了圖像，並將它們存儲在名為images的文件夾中。你可以調用你喜歡的任何東西，只要你更新HTML來匹配。

如果您希望幻燈片中有更多或更少的圖像，只需使用imageContainer類複製、粘貼或刪除代碼塊，記住根據需要更新文件名和ID。

最後，創建導航按鈕。這些允許用戶瀏覽圖像：

這些HTML實體代碼用於顯示向前和向後箭頭，與圖標字體的工作方式類似。

2css

現在核心結構已經就位，是時候讓它看起來漂亮了。下面是新代碼之後的樣子：

在樣式標記之間添加此CSS：

html { font-family: helvetica, arial;}#showContainer { /* Main wrapper for all images */ width: 670px; padding: 0; margin: 0 auto; overflow: hidden; position: relative;}.navButton { /* Make butt*** look nice */ cursor: pointer; float: left; width: 25px; height: 22px; padding: 10px; margin-right: 5px; overflow: hidden; text-align: center; color: white; font-weight: bold; font-size: 18px; background: #000000; opacity: 0.65; user-select: none;}.navButton:hover { opacity: 1;}.caption { float: right;}.imageContainer:not(:first-child) { /* Hide all images except the first */ display: none;}

現在看起來好多了，對吧？我們來看看代碼。

我使用的示例圖像都是670 x 503像素，所以這個幻燈片主要是圍繞這個尺寸的圖像設計的。如果您想使用不同大小的圖像，則需要適當地調整CSS。我建議您將圖像調整為匹配的大小--不同尺寸的不同圖像會導致樣式問題。

大多數CSS都是不言自明的。有代碼來定義容器的大小以存儲圖像，居中對齊所有內容，指定字體，以及按鈕和文本顏色。有幾種你以前可能從未見過的款式：

光標：指針——當您將光標移動到按鈕上時，它將光標從箭頭更改為指向性手指。
不透明度：0.65——這會增加按鈕的透明度。
user select:none——這確保您不會意外地突出顯示按鈕上的文本。

您可以在按鈕中看到大部分代碼的結果：

這裡最複雜的部分是這條奇怪的線條：

.imageContainer:not(:first-child) {

它可能看起來很不尋常，但它是相當不言自明的。

首先，它針對具有imageContainer類的任何元素。語法：not（）表示括號內的任何元素都應該排除在此樣式中。最後，第一個子語法聲明，這個CSS應該針對任何匹配名稱的元素，但忽略第一個元素。原因很簡單。由於這是幻燈片，一次只需要一個圖像。這個CSS除了第一個CSS之外隱藏所有的圖像。

三。javascript

最後一塊拼圖是JavaScript。這是使幻燈片功能正確的邏輯。

將此代碼添加到腳本標記：

$(document).ready(function() { $('#previous').on('click', function(){ // Change to the previous image $('#im_' + currentImage).stop().fadeOut(1); decreaseImage(); $('#im_' + currentImage).stop().fadeIn(1); }); $('#next').on('click', function(){ // Change to the next image $('#im_' + currentImage).stop().fadeOut(1); increaseImage(); $('#im_' + currentImage).stop().fadeIn(1); }); var currentImage = 1; var totalImages = 3; function increaseImage() { /* Increase currentImage by 1. * Resets to 1 if larger than totalImages */ ++currentImage; if(currentImage > totalImages) { currentImage = 1; } } function decreaseImage() { /* Decrease currentImage by 1. * Resets to totalImages if **aller than 1 */ --currentImage; if(currentImage < 1) { currentImage = totalImages; } }});

這似乎有悖常理，但我將跳過最初的代碼塊，直接從一半開始解釋代碼——別擔心，我解釋了所有代碼！

你需要定義兩個變量。（以下是如何在JavaScript中定義變量。）這些變量可以看作幻燈片的主要配置變量：

var currentImage = 1;var totalImages = 3;

它們存儲幻燈片中的圖像總數以及要開始播放的圖像數。如果有更多圖像，只需將totalImages變量更改為圖像總數。

這兩個函數增加圖像和減少圖像前進或後退當前圖像變量。如果此變量低於1或高於totalImages，則會重置為1或totalImages。這樣可以確保幻燈片在到達結尾時循環播放。

回到代碼的開頭。此代碼“針對”下一個和前面的按鈕。單擊每個按鈕時，它會調用適當的增減方法。完成後，它只需淡出屏幕上的圖像，並在新圖像中淡出（如currentImage變量定義的那樣）。

stop（）方法內置於jQuery中。這將取消任何掛起的事件。這確保了每個按鈕的按下是順利的，這意味著你沒有100個按鈕按下所有等待執行，如果你有點瘋狂的鼠標。fadeIn（1）和fadeOut（1）方法根據需要淡入或淡出圖像。該數字指定淡入淡出的持續時間（毫秒）。嘗試將此更改為更大的數字，如500。數值越大，轉換時間越長。然而，走得太遠，你可能會開始看到奇怪的事件或圖像變化之間的“閃爍”。以下是幻燈片：