Question

我在jQuery上略显业余但是已经设法提出了四个淡入淡出的div。虽然这样可以正常工作，但我想用只有一个div来替换当前的四个div，并为该div替换不同的背景图像而不是淡化四个div。

所以我在一个div中淡化了四个背景图像，而不是淡化四个不同的div。

我现在的代码：

jQuery：

<script type="text/javascript">
$(document).ready(function() {
    function fade($ele) {
        $ele.fadeIn(1000).delay(4000).fadeOut(1000, function() {
            var $next = $(this).next('.HomeImage');
            fade($next.length > 0 ? $next : $(this).parent().children().first());
       });
    };  

    fade($('div#stretchParent > .HomeImage').first());
}); 
</script>

HTML：

<div id="stretchParent"><!-- Stretch -->
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
</div><!-- End of Stretch -->

因此，我希望与四个淡入div一起使用的HTML是：

<div id="stretchParent"><!-- Stretch -->
    <div class="HomeImage"></div>
</div><!-- End of Stretch -->

任何想法或帮助，因为我完全被难倒，而且是我和朋友写了jQuery。

提前感谢任何方向，链接或帮助。

Answer 1

好的，给它一个去http://jsfiddle.net/davidja/Wzcgn/11/

$(document).ready(function () {

    var $backgroundimages = ['blue', 'red', 'grey', 'black'];
    var $backgroundcount = 0;

    function fade($ele) {
        $ele.css('background-color', $backgroundimages[$backgroundcount]);
        $backgroundcount++;
        $ele.fadeIn(1000).delay(4000).fadeOut(1000, function () {
            if ($backgroundcount >= $backgroundimages.length) {
                $backgroundcount = 0;
            };
            fade($ele);
        });
    };

    fade($('#stretchParent  .HomeImage').first());
});

使用图像代替下面的内容（未经测试）;

var $backgroundimages = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];

$ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');

将不同的div更改为背景图像jQuery Fade

1 个答案: