Question

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

Answer 1

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

Answer 2

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

jquery褪色背景图像

2 个答案: