jquery fading background 图片答案

【问题标题】：jquery fading background imagesjquery fading background 图片
【发布时间】：2011-12-01 03:43:27
【问题描述】：

我对 jQuery 很陌生，但我正在寻找一个简单的脚本，通过淡入淡出在标题中循环 3 或 4 个背景图像。它们是透明的 png，所以我尝试过的很多滑块都不起作用。

有什么想法吗？谢谢！

编辑：我已经完成了这项工作，但我不知道如何淡入/淡出

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);

【问题讨论】：

标签： jquery image background fadein fadeout

【解决方案1】：

<!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

【讨论】：

【解决方案2】：

你试过 jQuery 循环插件吗？我还没有特别检查它是否适用于透明 PNG，但它从来没有让我失望过。 http://jquery.malsup.com/cycle/

【讨论】：