Как сделать слайд-шоу из изображений этого слоя - PullRequest
Новая
       5

Как сделать слайд-шоу из изображений этого слоя

0 голосов
/ 26 февраля 2019

Я хочу сделать слайд-шоу из изображений, которые накладываются друг на друга при нажатии, а затем старые изображения исчезают при продолжении (например, здесь )

Эточто у меня есть до сих пор, но я не очень знаком с javascript, поэтому не уверен, где я ошибаюсь или как добавить еще больше изображений, которые будут продолжать работать, а затем исчезнуть.

(I 'Мы нашли много ответов на подобные вопросы, но другие решения пока не сработали!) 

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>

1 Ответ

0 голосов
/ 26 февраля 2019

Я хочу сделать слайд-шоу из изображений, которые накладываются друг на друга при нажатии, а затем старые изображения исчезают при продолжении (например, здесь )

Эточто у меня есть до сих пор, но я не очень знаком с javascript, поэтому не уверен, где я ошибаюсь или как добавить еще больше изображений, которые будут продолжать работать, а затем исчезнуть.

(I 'Мы нашли много ответов на подобные вопросы, но другие решения пока не сработали!) 

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>

Я добавил ссылку jquery.js по CDN в html-файл. 

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

Запустите мой фрагмент кода, он загрузит изображение.

...