Question

我正在一个网站上工作，背景图片会从一个淡入淡出到另一个，我设置它并且工作率约为98％。只有一个小问题。当它首次加载并且首次淡入时，它会淡化为白色，然后变为图像，而不是直接淡入下一个图像。之后，它工作得很漂亮。这是使用jQuery 1.9，我有jQuery noConflict，因为之前的开发人员使用MooTools编写了网站菜单。

<html>
<head>
  <script src="js/jquery.js">
  </script>
  <script>
var $s = jQuery.noConflict();

function swapImages(){
  var $sactive = $s('#myGallery .active');
  var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');

  $snext.fadeIn(1500).addClass('active');
  $sactive.fadeOut(2000, function(){
  });
  $sactive.removeClass('active');
};

$s(document).ready(function(){
  // Run our swapImages() function every 5secs
  setInterval('swapImages()', 5000);

});
</script>
</head>
<style>

 #myGallery{
   position:relative;
   width:100%; /* Set your image width */
   height:auto; /* Set your image height */
 }

 #myGallery img{
   display:none;
   position:absolute;
   top:0;
   width: 100%;
   left:0;
 }

 #myGallery img.active{
   display:block;
 }

 .home-page-rotator{
   position:absolute;
   width:100%;
   z-index:-10;
 }
</style>
<body>
<div class="home-page-rotator" id="myGallery">
 <img src="images/1.jpg" class="active" />
 <img src="images/2.jpg" />
 <img src="images/3.jpg" />
</div>
</body>
</html>

我拿出了所有的内容，这样你就可以测试你是否想要，但是那些运行背景旋转和淡入淡出的东西。另外我在一个单独的文件中有CSS但是为了发布到这里我只是把它内联，所以你可以看到代码背后的CSS。让我知道我应该怎么做才能解决这个问题？

Answer 1

将remove class方法移动到fadeout的函数调用似乎对我来说效果更好（至少在Chrome中）：

<script>
    var $s = jQuery.noConflict();

    function swapImages(){
      var $sactive = $s('#myGallery .active');
      var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');

      $sactive.fadeOut(2000, function(){
          $sactive.removeClass('active');
      });
      $snext.fadeIn(1500).addClass('active');
    };

    $s(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);

    });
</script>

Answer 2

我在一段时间后遇到了这个问题，我发现最简单的解决方案是从img元素切换到使用两个div和background-image css url来显示你的图像。我为此做了一个简单的滑块。欢迎您随意复制任何内容。

Background slider source

本质上，如果你有两个绝对定位为背景元素的div，你可以循环它们的z索引并淡入淡出它们。此外，您可以在构造的img元素中加载下一个图像，并在加载后，更改隐藏div的背景图像并淡入淡出。这意味着没有显示加载，您可以直接淡入幻灯片。

下面是一些伪代码，但是看一下源代码中的实际函数可能会更容易。

base.next_slide = function () {
    "current slide" = "next slide";
    base.containers[the_shown_container].fadeOut(duration,function () {
      $(this).css({'background-image':'url("' + "Next image url" + '")',
                   "z-index":"-2"});
      base.containers[the_next_container].css("z-index","-1");
      $(this).show();
      the_shown_container = the_next_container;
    });
  };

Plugin.prototype.init = function (base) {
  $('<img/>').attr('src', "Next image url").load(function() {
    base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
    if ("there's only one image in the slider"){
      base.containers[the_shown_container].fadeOut(duration,function () {
        $(this).css("z-index","-2");
        base.containers[the_next_container].css("z-index","-1");
      });
      return;
    }
    base.next_slide();
    setInterval(base.next_slide ,base.o.interval);
  });
};

背景图像旋转器与jQuery？

2 个答案: