一個問題

Question

我格後顯示在鏈中的一個圖像有很多相似圖片

<div id="gallery"> 
    <img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" /> 
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" /> 
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" /> 
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" /> 
</div> 

我想一次顯示一個圖像和一段時間後，另一圖像將被顯示，但我jQuery代碼不工作。有什麼問題

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    $('#gallery img').css({ opacity: 0.0 }); 
    $('#gallery img:first').css({ opacity: 1.0 }); 
    setInterval('gallery()', 2000); 
} 

function gallery() { 
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery img').first()); 
    var next = current.next().length > 0 ? current.next() : $('#gallery img').first(); 

    next.css({ opacity: 0.0 }) 
    .addClass('show') 
    .animate({ opacity: 1.0 }, 1000); 

    current.animate({ opacity: 0.0 }, 1000).removeClass('show'); 
} 

任何人都可以請糾正我的代碼。謝謝

Answer 1

「下一個」變量被賦予一個HTMLImageElement，它不理解jQuery函數。在使用

$('#gallery img').get(0) 

使用代替這個

$('#gallery img').first() 

如果你做到這一點在所有的地方，它應該工作（至少它沒有在這裏）:-)更新的jQuery代碼如下：

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    $('#gallery img').css({ opacity: 0.0 }); 
    $('#gallery img:first').css({ opacity: 1.0 }); 
    setInterval('gallery()', 2000); 
} 

function gallery() { 
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery  img').first()); 
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery img').first() : current.next()) : $('#gallery img').first()); 

    next.css({ opacity: 0.0 }) 
     .addClass('show') 
     .animate({ opacity: 1.0 }, 1000); 

    current.animate({ opacity: 0.0 }, 1000).removeClass('show'); 
}