透明窗口的Javascript幻灯片

我试图在JavaScript中的slidshow并走到这一步：透明窗口的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>

但我的问题是，当它要改变的画面，它只是增加了一个新的图片旁边的第一个。如何清除窗口？

来源

2013-12-18 user223062

你应该在容器内的图像上使用位置：绝对;''position：relative;'并且改变你想在顶部显示的元素的'z-index'。 – AfromanJ

一种方法是插入新的人之前给你的<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); 
}

来源

2013-12-18 18:45:55 nullability

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>

来源

2013-12-18 18:49:17 GLES

但如何在每张照片上有不同的时间？ – user223062

而不是创造新的图片对于幻灯片，请使用单个img标记，并且每隔一段时间就用一个新图像替换它的src属性。为此，您可以使用Javascript的setTimeout()方法。

来源

2013-12-18 18:50:30 mumush

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

这样的效果很好。

来源

2013-12-18 19:02:13

透明窗口的Javascript幻灯片

回答

相关问题