淡入淡出的圖像簡單的幻燈片javascript/html

我對JavaScript非常新，並試圖使用淡出淡出/照片幻燈片放映和我試圖使用代碼我見過其他地方，但它似乎並沒有工作有人可以看看，只是指出我可能會出錯的地方。淡入淡出的圖像簡單的幻燈片javascript/html

HTML

<div id="media" > 
    <img src="test1.jpg" /> 
    <img src="test2.jpg"/> 
    <img src="test3.jpg" /> 
</div>

CSS

#media 
{ 
    border-style:groove; 
    border-width:5px; 
    border-color:green; 
    background-color:purple; 
    height:34%; 
    width:30%; 
    margin-top:40px; 
    margin-right:5%; 
    margin-bottom:50px; 
    margin-left:5%; 
    float:left; 
} 
#media img 
{ 
    width:100%; 
    height:100%; 
}

腳本

 $('#media img:gt(0)').hide(); 
     setInterval(function() { 
      $('#media :first-child').fadeOut(4000) 
           .next('img') 
         .fadeIn(10) 
         .end() 
         .appendTo('#media'); 
     }, 4000); // 4 seconds 
    </script>

任何幫助將是巨大的。

謝謝你的幫助。

來源

2014-05-08 Jordan Ryan

問題是什麼是什麼呢？ –

要麼我的照片不改變和/或褪色或所有三張照片出現，而不是隻有一個，他們也不會改變。 –

這種類型的聲音你沒有正確鏈接jQuery庫..你在哪裏把代碼引用jQuery，以及如何？另外，你有網站在線嗎？如果我們對發生的事情有更全面的瞭解，幫助會容易得多。如果沒有，請嘗試將相關代碼放入jsFiddle（http://jsfiddle.net）並鏈接到它。 –

使用jQuery你可以做到這一點。也許是這樣的：

$(function() { 
    var images = $(".images img").hide(); 
    var current = 0; 
    setInterval(function() { 
     var next = ((current + 1) % images.length); 
     images.eq(current).fadeOut(); 
     images.eq(next).fadeIn(); 
     current = next; 
    }); 
});

然而，在你的CSS頁面，你想也想補充一下：

.images 
{ 
    position: relative; 
} 
.images img 
{ 
    display: none; 
    position: absolute; 
}

，如果你想要一些淡出人們別人這是偉大的？

查看此頁面，有使用jQuery一些其他的概念很相似：http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

來源

2014-05-08 02:16:40 tyler5819

這也只是一個問題，爲什麼你會使用.image（例如一個類）而不是#image（例如一個id）？ –

淡入淡出的圖像簡單的幻燈片javascript/html

回答

相關問題