透明窗口的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幻燈片

回答

相關問題