JQuery исчезающие фоновые изображения - PullRequest
Новая
       26

JQuery исчезающие фоновые изображения

2 голосов
/ 05 октября 2011

Я довольно новичок в 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);

Ответы [ 2 ]

1 голос
/ 05 октября 2011

Вы пробовали плагин цикла jQuery? Я специально не проверял, работает ли он с прозрачными PNG, но это никогда не подводило меня раньше. http://jquery.malsup.com/cycle/

0 голосов
/ 05 октября 2011 
<!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

...