Javascript 与我的 css 结合以添加图像更改效果

Question

我想使用 javascript 更改图像并添加 淡入淡出 效果。 这是我的淡入淡出效果的 css:

    var image=document.getElementById("image");
    var currentPos = 0;
    var images = ["foto1.jpg","foto2.jpg","foto3.jpg"]

    function volgendefoto() {
        if (++currentPos >= images.length) currentPos = 0;
        image.src = images[currentPos];

    }

    setInterval(volgendefoto, 4100);

#map {
        height:1000px;
        width:1000px;
        background:black;
    }
    #overlay {
        z-index:2;
        background:white;
        height:1000px;
        width:1000px;
        opacity:0;
        -webkit-transition: opacity 0.1s;
        -ms-transition: opacity 0.1s;
        -moz-transition: opacity 0.1s;
        -o-transition: opacity 0.1s;
        transition: opacity 1s;
        margin-top:-1000px;
    
        transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
    }
    #overlay:hover {
        opacity:.8;
        transition-delay: 0s;
        -webkit-transition-delay: 0s;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'>
        <img id="image" src="foto1.jpg">
        <div id='overlay'></div>
    
    </div>

这是一个学校元素，我们正在制作一个响应式网站，所以我将把它添加到该网站。

Answer 1

尝试了您的一段代码，它可以在悬停时为图像提供淡出效果。

[You can see the output below][1]


  [1]: https://jsfiddle.net/cxLjLnu8/1/ "Output here"

这是您所做的和所期望的吗？

您需要淡入哪种效果 或淡出？ 和 您需要悬停或滑动图像的效果吗？