Question

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

我发现，直接在body上更改背景并不是那么好，所以我寻找另一种解决方案。

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

我稍后改了一下，所以不使用img而是使用带有背景图片的div。它工作得非常好，但有一些我无法弄清楚。

现在的问题是，当两个图像之间发生转换时，会简要显示正文背景，我不想这样做。

更新

淡入淡出现在几乎完美无缺。现在的问题是，如果您在转换发生时离开窗口（通过最小化或更改标签），效果将会变得混乱。

另一个“问题”是在单击按钮时执行相同的效果。此外，当点击按钮1 （再次启动滑块）时，“滑块”应该从头开始重新启动，而不仅仅是停止的位置。

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

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

Answer 2

看看这个：http://jsfiddle.net/techsin/Dk2uT/1/

要使按钮只需调用changeBg函数..

var imgs = $("div[class^='img']"), ln = imgs.length;
imgs.eq(ln-1).show();

setInterval(changeBg,800);

var i=0;
function changeBg() {
    imgs.css('z-index','-1')
    .eq(i).css('z-index','1').fadeIn(function(){
       imgs.not(imgs.eq(i)).hide(); 
        i = ++i % ln;
    });
}

使淡入淡出效果看起来更漂亮“Fade Slider”

的 jQuery的：

的 HTML：

的 CSS：

2 个答案: