Очистить окно Слайд-шоу Javascript

Question

Очистить окно Слайд-шоу Javascript

0

Я пытаюсь сделать слайд-шоу в javascript и зашел так далеко:

<script type="text/javascript">
function showPic1(){
document.write("<img src=\"http://haga.mizgalski.se/upload/upload/bild1.jpg\" width=\"400\" height=\"300\">");
setTimeout(showPic2, 5000);
}

function showPic2(){
document.write("<img src=\"http://haga.mizgalski.se/upload/upload/image2.jpg\" width=\"400\" height=\"300\">");
setTimeout(showPic1, 9000);
}
showPic1();
</script>

Но моя проблема в том, когда она должна меняться, она просто добавляет новую картинку рядом с первой. Как очистить окно?

user223062 18 дек. 2013, в 19:48

Источник

0

Вы должны использовать position: absolute; на изображениях внутри контейнера с position: relative; и измените z-index элемента, который вы хотите отобразить вверху.
AfromanJ 18 дек. 2013, в 18:46

Теги:

javascript

html

4 ответа

Ещё вопросы

Вы должны использовать position: absolute; на изображениях внутри контейнера с position: relative; и измените z-index элемента, который вы хотите отобразить вверху.

GLES · Answer 1 · 2013-12-18T16-17-00.000Z

http://jsfiddle.net/QU2bX/

<head>
<style>
body {
    padding: 5px;
    border-left: 2px dotted brown;
    text-align: center;
}
img,input,div {
    margin: 0;
}
img {
    box-shadow: 0px 0px 10px rgba(20,20,20,0.5);
}
</style>
</head>
<body>
    <img src="http://placehold.it/350x200" id="pic"/>
    <hr/>
    <input type="button" value="Start" onclick="init();"/>
    <input type="button" value="Stop" onclick="abort();"/>
    <script>
    var l = 6;
    var pictures = new Array(l);
    var c = 0;
    var img = document.querySelector('#pic');

    for(var i=0;i<l;i++) {
        pictures[i] = 'http://placehold.it/350x' + parseInt(Math.random() * 100);
    }

    console.log(pictures);

    img.src= pictures[c];

    function animate() {
        img.src= pictures[c];
        if(c == l-1) {c = -1;}
        c += 1;
    }

    function init() {
        window.timer = setInterval(animate,1000);
    }
    function abort() {
        if(window.timer) {clearInterval(timer);}
    }
    </script>
</body>

а как разное время на каждой картинке?

mumush · Answer 2 · 2013-12-18T17-10-00.000Z

Вместо создания новых изображений для слайд-шоу используйте один тег img и каждый раз заменяйте его атрибутом src новым изображением. Для этого вы можете использовать Javascript setTimeout().

nullability · Answer 3 · 2013-12-18T16-13-00.000Z

Один из способов - предоставить идентификаторы тегов <img>, а затем удалить их из DOM, прежде чем вставлять новый:

function showPic1(){
var oldpic = document.getElementById("pic2");
oldpic.parentNode.removeChild(oldpic);
document.write("<img src=\"http://haga.mizgalski.se/upload/upload/bild1.jpg\" width=\"400\" height=\"300\" id=\"pic1\">");
setTimeout(showPic2, 5000);
}

function showPic2(){
var oldpic = document.getElementById("pic1");
oldpic.parentNode.removeChild(oldpic);
document.write("<img src=\"http://haga.mizgalski.se/upload/upload/image2.jpg\" width=\"400\" height=\"300\" id=\"pic2\">");
setTimeout(showPic1, 9000);
}

Mr. Mayers · Answer 4 · 2013-12-18T16-04-00.000Z

Использование document.write - плохая идея, потому что она перезаписывает любой код на странице. Это лучшая идея иметь div с id и изменить html для div через javascript.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function showPic1(){
$('#test').html("<img src='http://haga.mizgalski.se/upload/upload/bild1.jpg' width='400' height='300'>");
setTimeout(showPic2, 5000);
}

function showPic2(){
$('#test').html("<img src='http://haga.mizgalski.se/upload/upload/image2.jpg' width='400' height='300'>");
setTimeout(showPic1, 9000);
}
showPic1();
</script>
<div id="test"><img src='http://haga.mizgalski.se/upload/upload/bild1.jpg' width='400' height='300'></div>

Что-то вроде этого хорошо работает.