我不能讓我的圖像幻燈片工作使用JavaScript

我想創建一個簡單的圖像幻燈片類型的東西與下面的Javascript代碼，但它在做什麼是顯示在網頁上的第一個圖像與其他一切，然後5秒後清除頁面並顯示相同的圖像，然後每5秒再次顯示，但不再清除頁面。我不能讓我的圖像幻燈片工作使用JavaScript

中的JavaScript：

var waiPics=new Array(); 
waiPics[0]='images/path.jpg'; 
waiPics[1]='images/gorse.jpg'; 
waiPics[2]='images/stream.jpg'; 
waiPics[3]='images/pines.jpg'; 
waiPics[4]='images/stump.jpg'; 

var time; 

function timeUp() { 
    delete document.write(); 
    nextPic(); 
} 



function nextPic() { 
    var picNum=0; 
if (picNum = waiPics.length) { 
    picNum=0; 
} 
else { 
    picNum++; 
} 
    document.write('<img src="'+waiPics[picNum]+'" title="Waipahihi" alt="Waipahihi">'); 
    time=setTimeout("timeUp()",5000); 
}

的HTML：

<script type="text/javascript"> 
<!-- Begin 
nextPic(); 
// End --> 
</script>

我不是很有經驗的JavaScript，因此在此先感謝您的幫助。

來源

2012-05-24 user1414186

picNum將始終爲零，因爲它是在函數內部聲明的，並且每次調用該函數時將設置爲零。即使你解決這個問題，你的情況是錯誤的：

if (picNum = waiPics.length) {

的條件應該是：

if (picNum === waiPics.length) {

單等號（=）分配長度picNum，然後轉換成一個布爾值。數組長度不爲零，因此它變爲真值。然後每次重置爲零。

考慮使用JSLint檢查您的代碼是否存在錯誤並提出改進建議。它標記問題：

"Expected a conditional expression and instead saw an assignment." 
if (picNum = waiPics.length) {

事實上，在你的代碼中使用的JSLint並檢查其建議後，我會用更多的東西是這樣的：

// New array creation syntax 
var waiPics = ['images/path.jpg', 'images/gorse.jpg', 'images/stream.jpg', 'images/pines.jpg', 'images/stump.jpg']; 

var picNum = 0; // Declare outside inner function so its value is preserved 
var myDiv = document.getElementById("ssdiv"); // Get a div element to insert picture into 

function nextPic() { 
    if (picNum === waiPics.length) { // Proper comparison 
     picNum = 0; 
    } else { 
     picNum += 1; 
    } 

    // Set picture into div element without evil document.write 
    myDiv.innerHTML = '<img src="' + waiPics[picNum] + '" title="Waipahihi" alt="Waipahihi">'; 

    // No longer need timeUp; also don't use eval syntax 
    setTimeout(nextPic, 5000); 
}

分配innerHTML的避免了各種問題的文件撰寫也不需要刷新頁面來更改幻燈片圖像。另請注意其他意見。

來源

2012-05-24 05:58:56

謝謝，非常有幫助。我在我的html中保留

您需要使用比較操作符（ '=='），而不是分配（ '='）在這裏：

//if (picNum = waiPics.length) { 
if (picNum == waiPics.length) {

來源

2012-05-24 06:01:18

他應該使用===，而不是==，這是一個轉換比較。 –

在這個特定情況下，我看不出太多差異。兩個操作員都能正常工作。 –

JSLint將標記==的任何用法都是壞的，因爲它在比較之前轉換類型。例如，「」== 0是真的，而「」=== 0是假的。當你使用==代替===時，你會得到意想不到的副作用，這是許多錯誤的根源。我開始嘲笑這個，並使用==，它讓我陷入了困境很多次，我放棄了，從不再使用它。 –

看看這個例子...

http://jsfiddle.net/DaveAlger/eNxuJ/1/

讓自己的幻燈片工作，複製並粘貼下面的HTML到任何文本文件並將其保存爲slides.html

你可以在<div class="slideshow">內添加任意數量<img>

享受！

<html> 
<body> 
    <div class="slideshow"> 
     <img src="http://davealger.info/i/1.jpg" /> 
     <img src="http://davealger.info/i/2.bmp" /> 
     <img src="http://davealger.info/i/3.png" /> 
    </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script> 
     $(function(){ 
      $('.slideshow img:gt(0)').hide(); 
      setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000); 
     }); 
    </script> 
    <style> 
     .slideshow { position:relative; } 
     .slideshow img { position:absolute; left:0; top:0; } 
    </style> 
</body> 
</html>

來源

2012-05-31 17:55:44 DaveAlger

相關問題

我不能讓我的圖像幻燈片工作使用JavaScript

回答

相關問題