如何使用 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
一个

现在我们要把卡片C从上面拿下来放在下面。所以我们把它捡起来，把它移到一堆下面，放在 B 和 A 的下面。

B
一个
C

一旦您开始将它想象成一副物理卡片，它就会变得更容易使用。卡片可以是隐藏卡、覆盖卡或覆盖卡。

在上面的例子中，C是一张覆盖牌（覆盖B）。 B 是一张覆盖卡（由 C 覆盖）。 A是一张隐藏牌（我们移动牌时根本看不到它）。

我们移动牌后，C变成隐藏牌（在牌组底部），A变成覆盖牌（被B覆盖），B变成覆盖牌。

同样，您的滑块的幻灯片将相互覆盖和显示。

当您的用户按下 'NEXT' 时，您必须将图片加载到 'covered' 幻灯片中并慢慢淡出 'covering' 幻灯片。当 'covering' 幻灯片淡出时，您可以将其移至隐藏状态。然后，您可以将 'covered' 幻灯片移至 'covering'，下一张幻灯片移至 'covered'。

你的滑桩看起来像这样：

覆盖
涵盖
隐藏

事实上，您可以将这些 class 提供给您的幻灯片并应用 CSS 来更改幻灯片的 z-index。

其次，转换：

要更改封面幻灯片的不透明度，我建议您对元素应用 classes 并使用 CSS 将不透明度从 1 更改为 0，使用 a css transition。应用新 class 后，过渡将开始，让您从一个到下一个平稳过渡。

如何使用 JavaScript 将转场添加到幻灯片？

How to add transitions to a slideshow using JavaScript?

javascript

transition

image

slideshow