1

我在一个网站上工作，背景图像会从一个渐变到另一个，我已经设置并工作了大约 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。让我知道我应该怎么做才能解决这个问题？

4

2 回答 2

0

将删除类方法移动到淡出的函数调用似乎对我来说效果更好（至少在 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>
于 2013-03-12T18:25:44.410 回答
0

不久前我遇到了这个问题，我发现最简单的解决方案是从 img 元素切换到使用两个 div 和 background-image css url 来显示你的图像。不久前我做了一个简单的滑块。欢迎您从中复制您需要的任何内容。

背景滑块源

本质上，如果您有两个绝对定位为背景元素的 div，您可以循环它们的 z-index 并将它们淡入和淡出。此外，您可以在构造的 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);
  });
};
于 2013-03-12T18:36:59.113 回答