清除窗口Javascript幻灯片

clear window Javascript Slideshow

本文关键字：幻灯片 Javascript 窗口 清除      更新时间：2023-09-26

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

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

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>

一种方法是为您的<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);
}

不要为幻灯片创建新图像，而是使用单个img标签，并每隔一段时间将其src属性替换为新图像。 为此，您可以使用Javascript的setTimeout()方法。

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

这样的东西效果很好。

相关文章：