Question

以下是用于淡入和淡出一组图像的javascript。它运行良好，但我现在希望图像在每个人的顶部淡入，而在玩完之后，我遇到了一些麻烦。

使用Javascript：

<script type="text/javascript">
    $(document).ready(function () {

        var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
        var $backgroundcount = 0;

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

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

CSS：

div#stretchParent{width:100%;min-width:960px;height:275px;}
div.HomeImage{min-width:960px;width:100%;background-position:center !important;background-repeat:no-repeat !important;background-size:cover !important;min-height:275px;position:absolute;top:0;left:0px;margin:125px -0px 0px 0px;display:none;}

对于上述滑块的工作版本，您还可以看到：http://universitycompare.com

Answer 1

最简单的方法是为每个图像创建一个元素，然后在同时操作z-index的同时淡化元素。

SEE THE EXAMPLE HERE

由于您已经在使用jQuery，只需使用.each()遍历数组并将元素追加到容器元素#stretchParent。

$.each(backgroundImages, function (index, value) {
    $('#stretchParent').append('<div class="HomeImage" style="background-image:url(' + value + ');"></div>');
});

至于功能本身，我建议使用setInterval。将延迟设置为您想要的任何内容。

setInterval(function () {
    el = $('#stretchParent .HomeImage');
    el.first().css('z-index', 2).fadeOut(1000).appendTo($('#stretchParent'));
    el.eq(1).show().css('z-index', 1);
}, 3000);

该函数增加第一个元素的z-index，然后将其淡出并将其附加到容器元素的末尾。下一行只是使下一个元素可见，同时减少其z-index以确保它出现在当前图像的后面。

EXAMPLE HERE // FULL SCREEN EXAMPLE HERE

Answer 2

我认为其他一些解决方案都在考虑它。你已经离我很近了。您不需要淡入淡出一张图像，而是每次都需要在顶部淡入新图像。我把你的代码略微下面。

这是jsFiddle：http://jsfiddle.net/Q5YYG/

$(document).ready(function () {

    var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
    var $backgroundcount = 0;

    function fade($ele) {

        // Determine which image is next
        $backgroundcount++;
        if ($backgroundcount >= $backgroundimages.length) {
            $backgroundcount = 0;
        };

        // Put a new hidden image in front of the original image
        var $new_element = $ele.clone();
        $ele.after($new_element);
        $new_element.hide().css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');

        // Fade the new image in
        $new_element.delay(5000).fadeIn(1000, function() {

            // After the new image is visible, remove the old image.
            $ele.remove();

            // Do the same thing over again
            fade($new_element);
        });
    };

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

Answer 3

为什么不http://jsfiddle.net/tX7Cp/：

淡化为0或0.2的不透明度（低的值以产生更重叠的效果）
更改/循环背景图片
淡化为1
5秒内淡入淡出功能的setTimeout调用

如果您想最初显示第一张图像5秒钟，可以在超时时调用第一个条目呼叫。

其他重要提示，您可能需要预先加载图像，以便第一次从服务器检索图像时不会干扰平滑淡入淡出。也许在开始之前循环请求图像一次，或者使用虚拟标签将图像加载到屏幕之外。

var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
var $backgroundcount = 0;

function fade($ele) {
    $ele.fadeTo(1000, 0, function(){
        $ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
        $backgroundcount++;
    }).fadeTo(1000, 1.0, function () {
        if ($backgroundcount >= $backgroundimages.length) {
            $backgroundcount = 0;
        };
        setTimeout(function(){
            fade($ele);
        }, 5000);
    });
};

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

理想解决方案

这是一个带有交替图像的重叠衰落解决方案：

FIDDLE

<div id="stretchParent">
  <div class="HomeImage" style="background-image: url(http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg);">
  </div>
  <div class="HomeImage" style="background-image: url(http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg);z-index: -1">
  </div>
</div>

var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
var $backgroundcount = 1;
var $elems = $('#stretchParent .HomeImage');

function fade($ele) {
  $other = $elems.eq($backgroundcount%2);
  $other.css('opacity', 1);
  $backgroundcount++;
  $ele.fadeTo(1000, 0, function(){
    $other.css('z-index', 0);
    $ele.css({
      'z-index': -1, 
      'background-image': 'url('+$backgroundimages[$backgroundcount%$backgroundimages.length]+')'
     });

   })
   setTimeout(function(){
     fade($other);
   }, 5000);
};

fade($elems.first());

Answer 4

首先，我要指出，您需要两个或更多重叠元素才能使这样的事情发挥作用。我不打算为你编写代码，但我建议为每个背景图像创建一个<img>元素，并将该堆栈图像直接放在相关元素后面。如果您不太关心自己制作，可以查看this css3 solution（演示5和6）或this jquery plugin。

更改javascript以淡入彼此的顶部而不是fadein / fadeout？

4 个答案: