1つの問題

Question

私のdivの後にチェーン1の画像を表示すると、私は一度に一つの画像を表示したい

<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

"次の"変数には、jQuery関数を理解できないHTMLImageElementが割り当てられています。

：

$('#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'); 
}