如何使用JavaScript將轉場添加到幻燈片？

Question

我有以下非常簡單Javasript代碼，更改通過更改SRC顯示的圖像。在主HTML文件中按下兩個按鈕時，會執行nextpic（）和prevpic（）函數。

var pics = [ 
    "http://dp.topcovers4fb.com/wp-content/uploads/2015/12/Child-Tomboy-Display-Picture.jpg", 
    "http://assets.rollingstone.com/assets/images/gallery/420cddbf3f116072564ab58c05f4d5e9b31aa046.jpg", 
    "http://imgfave-chat-herokuapp-com.global.ssl.fastly.net/image_cache/1292725000558109.jpeg", 
    "http://ecx.images-amazon.com/images/I/41N1wi0htgL.jpg", 
    "http://readynutrition.com/wp-content/uploads/2016/01/goat.jpg", 
    "http://images5.fanpop.com/image/photos/31600000/Random-Stuff-3-random-31692057-500-500.jpg" 
] 

function init(){ 
    interval; 
} 

onload = init; 

var interval = setInterval(nextpic, 5000); 

var max_pics = pics.length - 1; 
var i = 1; 

function nextpic(pic){ 
    var pic = document.getElementById("picswap"); 

    pic.src = pics[i]; 
    if(i < max_pics){ 
     i++; 
    }else{ 
     i = 0; 
    } 
} 

function prevpic(pic) 
{ 
    var pic = document.getElementById("picswap"); 
    pic.src = pics[i]; 
    console.log(i) 
    if(i > 0){ 
     i--; 
    }else{ 
     i = max_pics; 
    } 

} 

有沒有什麼方法可以讓我做一個簡單的淡入淡出過渡到圖像？迄今爲止提出的問題的答案不適用於我的代碼風格。我知道可能沒有辦法直接檢測src更改，但是可能的解決方案是什麼？

Answer 1

有兩個部分，以這樣的回答：

首先，可視化滑塊

要獲得兩個項目淡入，一個比其他，你必須具備兩個要素。一個用於下一個圖像，一個用於前一個圖像。

想象它像一堆三張牌。

您與字母A

在中間卡底部出現了字母B.

您與字母C.

卡頂部的卡

• ç
• 乙
• 甲

現在我們想從頂部取出卡片C並將其放在底部。所以我們把它撿起來，當你開始顯現它像一個甲板一旦其向下移動樁，並把它在B和A

• 乙
• 一個
• Ç

物理卡變得更容易處理。卡可以是隱藏卡，覆蓋卡或有蓋卡。

在上面的情況下，C是一個覆蓋卡（覆蓋B）。 B是一張有蓋牌（由C覆蓋）。 A是一張隱藏卡片（我們在移動卡片時根本看不到它）。在我們移動牌後，C變成了一張隱藏牌（在牌組的底部），A變成了一張有蓋牌（由B覆蓋），並且B成爲了一張有牌。

同樣，您的滑塊的幻燈片將覆蓋和透露對方。

當用戶按下'下一步'時，您將不得不將圖片加載到'被遮蓋'的幻燈片，並慢慢淡出'遮蓋'幻燈片。當「覆蓋」幻燈片淡出時，可以將其移至隱藏狀態。然後，您可以將「有蓋」的幻燈片移動到「覆蓋」，然後將下一個移動到「覆蓋」。

你滑樁看起來就像這樣：

• 覆蓋
• 覆蓋
• 隱藏

事實上，你可以給這些類幻燈片和應用CSS這改變了您的幻燈片的Z指數。

其次，轉變​​：

要更改覆蓋幻燈片的不透明性，我建議你應用類的元素，並使用CSS使用a css transition從1改變不透明度爲0。一旦新課程被應用，過渡將開始，給你一個平穩的過渡。