jquery褪色背景圖像

我很新的jQuery，但我正在尋找一個簡單的腳本循環3或4的背景圖像通過褪色他們進出。它們是透明的PNG，所以我爲此嘗試過的很多滑塊都不起作用。jquery褪色背景圖像

任何想法？謝謝！

編輯：我有這個工作，但我無法弄清楚如何淡入/淡出

setInterval(function() { 
    var source = $("#background-images img:first").attr("src"); 
    $('#background-images img:first').appendTo($('#background-images')); 
    $('#fading-images-container').css('background', 'url(' + source + ') no-repeat'); 
}, 5000);

來源

2011-10-05 user975876

你試過了jQuery插件週期？我沒有特別檢查它是否可以使用透明的PNG，但它從來沒有讓我失望過。 http://jquery.malsup.com/cycle/

來源

2011-10-05 03:27:03 madomausu

<!DOCTYPE html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Basic Demo</title> 

<style type="text/css"> 
.slideshow { height: 232px; width: 300px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     }); 
}); 
</script> 
</head> 
<body> 

    <div class="slideshow"> 
    <img src="IMG_2624.JPG" width="500" height="500" /> 
    <img src="IMG_2625.JPG" width="500" height="500" /> 
    <img src="IMG_2626.JPG" width="500" height="500" /> 
    <img src="IMG_2627.JPG" width="500" height="500" />  
</div> 
</body> 
</html>

我參考這個鏈接 http://jquery.malsup.com/cycle/basic.html

來源

2011-10-05 06:11:47

jquery褪色背景圖像

回答

相關問題