如何制作图层的幻灯片

问题描述 投票:-1回答:1

我想制作一张幻灯片,当你点击时,图像叠加在一起,然后当你继续时,旧的图像会消失(如here

这就是我到目前为止所做的,但我对javascript并不是很熟悉所以我不确定我哪里出错或者如何添加更多可以继续工作然后消失的图像。

(我找到了很多类似问题的答案,但到目前为止还没有其他解决办法!)

var timesClicked = 0;

$("#menu_button").click(function() {
    timesClicked++;

    if (timesClicked=2) {
        function showStuff(id) {
            document.getElementById(img-3).style.display = "block";
        }
    }
    else {
        function showStuff(id) {
            document.getElementById(img-3).style.display = "block";
        }
    }

})
<img src="https://i0.wp.com/wattlecreative.com/wp-content/uploads/2019/02/01_PES-1.jpg?zoom=1.5&w=1200" style="height: 60vw;" />        
<div id="a_x200" style="display:none;"><img src="https://images.unsplash.com/photo-1487631807774-f9faa5694358?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1900&q=80" style="width: 40vw;" /></div>

<img id="img-3" src="https://c.stocksy.com/a/vpD800/z9/1959815.jpg?1551161499" style="width: 20vw; display: none;" />

        <input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>
javascript jquery html css slideshow
1个回答
0
投票

我想制作一张幻灯片,当你点击时,图像叠加在一起,然后当你继续时,旧的图像会消失(如here

这就是我到目前为止所做的,但我对javascript并不是很熟悉所以我不确定我哪里出错或者如何添加更多可以继续工作然后消失的图像。

(我找到了很多类似问题的答案,但到目前为止还没有其他解决办法!)

var timesClicked = 0;

$("#menu_button").click(function() {
    timesClicked++;

    if (timesClicked=2) {
        function showStuff(id) {
            document.getElementById(img-3).style.display = "block";
        }
    } else {
        function showStuff(id) {
            document.getElementById(img-3).style.display = "block";
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i0.wp.com/wattlecreative.com/wp-content/uploads/2019/02/01_PES-1.jpg?zoom=1.5&w=1200" style="height: 60vw;" />        
<div id="a_x200" style="display:none;"><img src="https://images.unsplash.com/photo-1487631807774-f9faa5694358?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1900&q=80" style="width: 40vw;" /></div>

<img id="img-3" src="https://c.stocksy.com/a/vpD800/z9/1959815.jpg?1551161499" style="width: 20vw; display: none;" />

<input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>

我在html文件中添加了CDN引用的jquery.js。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

运行我的代码片段,它将加载图像。

© www.soinside.com 2019 - 2024. All rights reserved.