Question

我正试图在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>

但我的问题是它应该改变图片，它只是在第一张图片旁边添加了一张新图片。如何清除窗户？

Answer 1

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>

Answer 2

一种方法是提供<img>代码ID，然后在插入新代码之前将其从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);
}

Answer 3

不是为幻灯片显示创建新图片，而是使用单个img标记，并经常将新图像替换为src属性。为此，您可以使用Javascript的setTimeout()方法。

Answer 4

使用document.write是一个坏主意，因为它会覆盖页面上的任何代码。有一个带有id的div更好的主意，并通过javascript改变div的html。

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

这样的事情很有效。

清除窗口Javascript幻灯片

4 个答案: