0
我正在創建一個幻燈片，它將循環顯示一系列圖片，並在每個圖片之間淡入淡出。我的幻燈片應該會淡入淡出，但它有時會跳躍
這是我的計劃：
- 暫停3秒
- 淡出即頂部
- 開關上的圖像的z-index
- 變化對一個在所述圖像的圖像返回，並使其再次可見 重複
現在它適用於前兩張幻燈片，然後接下來的4張不行，那麼2的工作，那麼4不要等
這裏是我的全部代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Trust Department Slideshow</title>
<script>
var SlideshowImageNames = new Array(
"houses.jpg",
"highschool.jpg",
"flags.jpg"
);
var slideshowCurrentImage = "A";
var SlideshowImagePreload = new Array
for (i=0; i<SlideshowImageNames.length; i++) {
SlideshowImagePreload[i]=new Image();
SlideshowImagePreload[i].src=SlideshowImageNames[i];
}
function slideshowStart() {
console.log("starting slideshow");
document.getElementById("trustSlideshowA").style.backgroundImage = "url('"+SlideshowImageNames[0]+"')";
document.getElementById("trustSlideshowB").style.backgroundImage = "url('"+SlideshowImageNames[1]+"')";
setTimeout("slideshowLoopBegin()",500);
}
function slideshowLoopBegin() {
console.log("begin loop (");
if (slideshowCurrentImage == "A")
fade("trustSlideshowA");
else if (slideshowCurrentImage == "B")
fade("trustSlideshowB");
}
function slideshowLoopEnd() {
if (slideshowCurrentImage == "A") {
document.getElementById("trustSlideshowA").style.zIndex = 1;
document.getElementById("trustSlideshowB").style.zIndex = 2;
document.getElementById("trustSlideshowA").style.opacity = 1;
document.getElementById("trustSlideshowA").style.filter = 'alpha(opacity = 100)';
slideshowCurrentImage = "B";
console.log("sent A to back");
}
else if (slideshowCurrentImage == "B") {
document.getElementById("trustSlideshowB").style.zIndex = 1;
document.getElementById("trustSlideshowA").style.zIndex = 2;
document.getElementById("trustSlideshowB").style.opacity = 1;
document.getElementById("trustSlideshowA").style.filter = 'alpha(opacity = 100)';
slideshowCurrentImage = "A";
console.log("sent B to back");
}
console.log(") end of loop");
setTimeout("slideshowLoopBegin()",500);
}
var TimeToFade = 1000.0;
function fade(eid) {
console.log("fading out '"+eid+"'");
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null) {
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1') {
element.FadeState = 2;
}
else {
element.FadeState = -2;
}
}
if (element.FadeState == 1 || element.FadeState == -1) {
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else {
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid) {
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks) {
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
slideshowLoopEnd();
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
window.onload=slideshowStart;
</script>
</head>
<body>
<div style="width: 670px; height: 253px; position: relative;">
<div style="z-index: 3; width: 670px; height: 253px; background: url('mainimg_overlay.png'); position: absolute; top:0; left: 0;"></div>
<div style="z-index: 2; width: 670px; height: 253px; background: url('lighthouse.jpg'); position: absolute; top:0; left: 0;" id="trustSlideshowA"></div>
<div style="z-index: 1; width: 670px; height: 253px; background: url('lighthouse.jpg'); position: absolute; top:0; left: 0;" id="trustSlideshowB"></div>
</div>
</body>
</html>
我無法上傳從這裏任何東西，所以我希望有人能找到這個錯誤。我完全從頭開始，並再次遇到同樣的問題。哦，現在我的代碼甚至不改變圖片，它只是在前兩個之間切換，但它甚至不能做到這一點。
不要使用'新的Array（）'，使用[數組文本（http://stackoverflow.com/a/885194/752213）'[]' –