Показать изображение, скрыть его через 5 секунд, и появляется кнопка, чтобы показать следующее изображение

Question

Показать изображение, скрыть его через 5 секунд, и появляется кнопка, чтобы показать следующее изображение

0

Для школы я хочу создать веб-страницу, где я покажу 1 изображение, которое исчезает через 5 секунд и появляется кнопка. Вы должны нажать кнопку до появления следующего изображения, которое показывается в течение 5 секунд. Так что одна и та же история.

Поскольку я немного разбираюсь в кодировании, я нашел здесь какой-то фрагмент кода и попытался его использовать, но я могу только показать 1 изображение в течение 5 секунд после того, как я нажму кнопку.

Вот код

<input type="button" value="Show image for 5 seconds" onclick="show()"><br><br>
<div id="myDiv" style="display:none"><img id="1" src="img/logo.png"></div>
<div id="myDiv" style="display:none"><img id="2" src="img/test.jpg"></div><br>
<script type="text/javascript">
    function show() {
        document.getElementById("myDiv").style.display = "block";
        setTimeout("hide()", 5000);  // 5 seconds
    }
    function hide() {
        document.getElementById("myDiv").style.display = "none";
    }
</script>

Спасибо, и я надеюсь, вы, ребята, можете мне помочь! :)

user3376018 03 март 2014, в 19:19

Источник

Теги:

javascript

jquery

html

2 ответа

Ещё вопросы

Oscar Paz · Answer 1 · 2014-03-03T15-57-00.000Z

Ну, для начала, у вас есть два div с одним и тем же идентификатором, что неверно. Предполагая, что у вас есть ваши изображения:

<button id="next" onclick="showNext();">Show next image</button><br />
<div class="image" style="display: none;"><img src="img/logo1.png" /></div>
<div class="image" style="display: none;"><img src="img/logo2.png" /></div>
<div class="image" style="display: none;"><img src="img/logo3.png" /></div>
<div class="image" style="display: none;"><img src="img/logo4.png" /></div>

<script type="text/javascript">
    var divs = document.querySelectorAll('div.image'); //select all divs with class 'image'
    var button = document.getElementById('next'); //button.
    var currentImage = 0;
    function showNext() {
        button.style.display = 'inline';
        divs[currentImage].style.display = 'block';
        setTimeout(hide, 5000);
    }

    function hide() {
        button.style.display = 'block';
        divs[currentImage].style.display = 'none';
        currentImage = (currentImage + 1) % divs.length;
    }
</script>

Я не потрудился стилизовать ваши элементы с правилами CSS, которые были бы рекомендованы, но это будет работать по назначению.

Wilmer · Answer 2 · 2014-03-03T17-08-00.000Z

-2

Удалите двойные кавычки:

setTimeout(hide, 5000);  // 5 seconds

Wilmer 03 март 2014, в 17:08

0

Извините, setTimeout("hide()", 5000) правильно.
leaf 03 март 2014, в 18:18
0

jsfiddle.net/XmVH5/1 Я проверял это здесь, он выдает ошибку ссылки ...
Wilmer 03 март 2014, в 18:20
0

Выберите «Без переноса в <body>» в настройках.
leaf 03 март 2014, в 18:22
0

Но, действительно, это может быть источником ошибок. Здесь не тот случай.
leaf 03 март 2014, в 18:26

Показать ещё 2 комментария