可降解JavaScript幻燈片的問題

更新：我編輯了下面的代碼，以顯示當我嘗試使用CSS可見性時所使用的內容。我仍然堅持這個問題。我也嘗試從onLoad正文中移除preloader（）函數，但我無法使用getElementById，因爲元素尚未加載。我最後的想法是從HTML本身中調用rand（5），這樣如果啓用Javascript，它會在圖像文件名的末尾添加一個數字，但我甚至不知道如何將它直接合併到HTML中。任何幫助將不勝感激！可降解JavaScript幻燈片的問題

我用Javascript創建了幻燈片。在瀏覽器中未啓用JavaScript的情況下，HTML會調用靜態圖像進行顯示。如果在瀏覽器中啓用了Javascript，則應該在靜態圖像的位置加載一個隨機圖像。

我遇到的問題是，當Javascript啓用時，您會看到靜態圖像加載的頁面，然後，如果隨機圖像不同，您會看到它很快加載後。所以它看起來像兩個圖像在頁面加載時快速循環。

這裏是我使用的Javascript代碼：

// Define images used in slideshow 
imgArray = new Array(
"header_img1.jpg", 
"header_img2.jpg", 
"header_img3.jpg", 
"header_img4.jpg", 
"header_img5.jpg" 
); 
baseURL = "images/"; 

// Preload slideshow images 
function preloader() { 

    domElement = document.getElementById('gallery-image'); 
    domElement.style.visibility = "hidden"; 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // start preloading imgArray 
    for (i=0; i<3; i++) { 
     imageObj.src=imgArray[i]; 
    } 
} 


// Select random image to display for slideshow 
function random_img() { 

    domElement.style.visibility = "visible"; 
    rand = Math.round(Math.random()*(imgArray.length - 1)); 
    document["faces"].src = baseURL + imgArray[rand]; 
    rand += 1; 
}

這裏是伴隨HTML：

<body onLoad="preloader();random_img();"> 
. 
. 
. 
<a href="#" onclick="f_slideshow(-1);return false;"> 
<img src="images/header_img1.png" alt="" width="26" height="207" /></a> 
<img src="images/header_img1.jpg" alt="" width="529" height="197" class="img-1" name="faces" /> 
<a href="#" onclick="f_slideshow(1);return false;"> 
<img src="images/header_img2.png" alt="" width="27" height="207" /></a>

如何改變什麼，我有那麼當啓用JavaScript中，你不」 t看到兩個騎行圖像？

來源

2011-02-16 Yazmin

這是JavaScript代碼，解決我的問題：

// Define images used in slideshow 
imgArray = new Array(
    "header_img1.jpg", 
    "header_img2.jpg", 
    "header_img3.jpg", 
    "header_img4.jpg", 
    "header_img5.jpg" 
); 
baseURL = "images/"; 


// Hide static image and preload slideshow images 
function preloader() { 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // start preloading imgArray 
    for (i=0; i<3; i++) { 
     imageObj.src=imgArray[i]; 
    } 

} 

// Control previous/next functions of slideshow 
numImages = imgArray.length; 
function f_slideshow(xflip) { 

    // grab source of current image 
    var curImage = document["faces"].src; 

    // get image number from string and convert to int 
    curImage = parseInt(curImage.substring(curImage.length-5, curImage.length)); 

    // create source for next/previous link 
    curImage = curImage + xflip; 
    if (curImage > numImages) 
     { curImage = 1 ; } 
    if (curImage == 0) 
     { curImage = numImages ; }  
    document["faces"].src = baseURL + imgArray[curImage - 1]; 
}

來源

2011-06-17 22:32:54 Yazmin

在您的preLoader()中操作樣式來隱藏您希望隱藏的元素（如果啓用了javascript）。

這樣，如果啓用了元素將會隱藏，如果不是，顯然javascript隱藏它們將不會運行。

例如

var domElement = document.getElementById('id-of-element'); 

domElement.style.display = 'none';

來源

2011-02-16 17:27:44 jondavidjohn

謝謝！這是朝着正確方向邁出的一步。我操作了可見性，所以圖像仍然佔據了相同的空間，然後在`random_img（）`的開始處使元素可見。奇蹟般有效。我感謝您的幫助！ – Yazmin 2011-02-16 20:45:08

可降解JavaScript幻燈片的問題

回答

相關問題