javascript - 使淡入淡出效果在 "Fade Slider"上看起来更漂亮

Question

我正在尝试创建图像 slider ，它可以更改我网站的正文背景。

我发现，直接在 body 上更改背景不是很好，所以我寻找其他解决方案。

然后我发现了这个:jQuery Animated Background Images Fade in Out

然后我稍微改变了它，所以我没有使用 img，而是使用了带有背景图片的 div。 它工作得很好，但有些东西我想不通。

现在的问题是，当两个图像之间发生转换时， body 背景会短暂显示，这是我不想看到的。

更新

淡入淡出效果现在几近完美。现在的问题是，如果您在过渡发生时离开窗口(通过最小化或更改选项卡)，效果将会困惑。

另一个“问题”是在点击按钮时产生同样的效果。 而且，当单击按钮 1 (再次启动 slider )时，“ slider ”应该从头开始重新启动，而不仅仅是从停止的地方重新启动。

---

到目前为止，这是我的代码:

jQuery:

$(window).load(function() {
    $('#slider div.bgfade').hide();
    $('#slider div.bgfade').first().show();
    function anim() {
        $("#slider div.bgfade").first().appendTo('#slider').fadeIn(1500, function() {
            $("#slider div").first().fadeOut(1500);
        });

        $set = setTimeout(anim, 3000);
    }
    anim();

    $('span').click(function() {
        $('#slider div.bgfade').fadeOut(500);
        var count = $(this).index();
        clearTimeout($set);
        if(count == 0) {
            $('#button-images div').fadeOut(500);
            anim();
        }
        else if(count == 1) {
           $('#button-images div').fadeOut(1500);
           $('#button-images div.image1').fadeIn(1500);
        }
        else if(count == 2) {
           $('#button-images div').fadeOut(1500);
           $('#button-images div.image2').fadeIn(1500);
        }
        else if(count == 3) {
           $('#button-images div').fadeOut(1500);
           $('#button-images div.image3').fadeIn(1500);
        }
   });
});

HTML:

<span>Start Slider again</span>
<span>Button 2</span>
<span>Button 3</span>
<span>Button 4</span>

<div id="slider">
    <div class="bgfade" style="background: red;"></div>
    <div class="bgfade" style="background: blue;"></div>
    <div class="bgfade" style="background: orange;"></div>
</div>
<div id="button-images">
    <div class="image1" style="background: green"></div>
    <div class="image2" style="background: yellow"></div>
    <div class="image3" style="background: pink"></div>
</div>

CSS:

body {
    background: #333;
}

span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
    background: #FFF;
    cursor: pointer;
}

#slider, #button-images {
    position:fixed;
    z-index:-1; 
    top:0; 
    left:0;
}
#slider div.bgfade, #button-images div {
    position:fixed;
    top:0;
    display:none;
    width:100%;
    height:100%;
    z-index:-1;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

Here's a Fiddle Demo

..为什么它从第二张图片开始(橙色的)？

谁能帮帮我？ :)

Answer 1

您的问题是两张幻灯片同时改变了不透明度，并且有一个短暂的时刻您可以看透它们，因此正文背景变得可见。

尝试改变

$("#slider div.bgfade").first().appendTo('#slider').fadeOut(500);
$("#slider div").first().fadeIn(500);

与这部分分开

 var fadeout = $("#slider div.bgfade").first().appendTo('#slider');
 $("#slider div").first().fadeIn(500, function(){
     fadeout.fadeOut(500);
 });

它会在淡出当前幻灯片之前淡入下一张幻灯片，因此下一张幻灯片将在当前淡出的幻灯片下方可见，您将看到下一张幻灯片而不是正文背景。

更新(主要更改代码使按钮功能)

JS

$(window).load(function () {

   //just caching selector results
   var slider = $('#slider'),
      slides = $('.bgfade', slider),
      btnsCntnr = $('#sliderbuttons'),
      set;

   //assign each slide an id, and for each slide, insert a button for switching to it.
   slides.each(function (i) {
      var slideid = 'slide' + i;
      $(this).attr('id', slideid);

      //dynamically create "switch to Slide N" button
      btnsCntnr.append($('<span />', {
         id: slideid + 'btn',
         'class': 'sliderbtn',
         'data-slide': slideid /*id of the slide this button switches to*/
      }).html('Slide ' + (i + 1)));
   });

   //fix for "why do it start with the second image (the orange one)?"
   slides.hide().first().show();

   function anim(slideid) {

      var first = $('.bgfade', slider).first();

      if (first.attr('id') == slideid) {
         //slide is currently visible, so no transition required
         loopAnim();
         return;
      }

      //next slide is the slide with specified slideid, otherwise 2nd slide (the one after the visible one)
      var next = typeof slideid === 'undefined' ? $(".bgfade:nth-child(2)", slider) : $('#' + slideid, slider),
      //current slide is all slides before next slide
      current = next.prevAll().appendTo(slider);

      next.stop().fadeIn(500, function () {
         //only fadeout visible slides
         current.filter(function () {
            return $(this).is(':visible');
         }).stop().fadeOut(500);
      });

      //set next transition
      loopAnim();
   }

   function loopAnim() {
      set = window.setTimeout(anim, 5000);
   }

   function stopAnim() {
      window.clearTimeout(set);
   }

   function switchSlide(slideid) {
      stopAnim();
      anim(slideid);
   }

   $('.sliderbtn').click(function () {
      switchSlide($(this).data('slide'));
   });

   //start slider
   loopAnim();

});

HTML

<div id="sliderbuttons"></div>

<div id="slider">
   <div class="bgfade" style="background: url(large11.jpg);"></div>
   <div class="bgfade" style="background: url(large12.jpg);"></div>
   <div class="bgfade" style="background: url(large13.jpg);"></div>
</div>