Question

我想用javascript更改我的图片并添加fade效果。这是我的css淡出效果：

＆＃13;

    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);

＆＃13;

#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;
    }

＆＃13;

<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>

＆＃13;

这是一个学校项目，我们正在建立一个响应式网站，所以我将把它添加到该网站。

Answer 1

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

[You can see the output below][1]


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

这是你所做的和预期的吗？

你需要淡入效果还是淡出？和你是否需要对悬停或滑动图像产生影响？

Javascript与我的CSS结合使用可以对imagechange添加效果

1 个答案: