Question

我在1个网站上将此代码用于3个画廊。每个画廊都有其他图片。问题是第一个图库正在循环中工作，但第二个和第三个图库在一个循环后停止。

  <script type="text/javascript">
    function cycleImages(){
          var $active = $('#cycler .active');
          var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
          $next.css('z-index',2);//move the next image up the pile
          $active.fadeOut(1700,function(){//fade out the top image
              $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
              $next.css('z-index',3).addClass('active');//make the next image the top one
          });
        }

    $(document).ready(function(){
    // run every 4s
    setInterval('cycleImages()', 5000);
    })</script>

http://jsfiddle.net/eEpwK/3/

Answer 1

在你的小提琴中，你多次使用id="cycler"。您可能已经知道在页面中每个id必须是唯一的。我做的第一件事就是将你的html代码更改为：

<div id="one">
   <div id="cycler1" class="slides">
       ...
    </div>
</div>
<div id="two">
   <div id="cycler2" class="slides">
       ...
    </div>
</div>

由于现在循环器的id不同（cycler1，cycler2，cycler3），我将css更改为：

.slides { position:relative; }
.slides img { position:absolute; z-index:1 }
.slides  img.active { z-index:3 }

最后javascript将它连接起来。此代码几乎与您的代码相同，只有一个区别。不是将id-selector #cylcer硬编码到函数中，而是将id-selector作为参数sel传递。

function cycleImages(sel){                                              
    var $active = $(sel + " .active");
    var $next = ($active.next().length > 0) 
                    ? $active.next() : $(sel + " img:first");
    //move the next image up the pile
    $next.css('z-index',2);
    //fade out the top image
    $active.fadeOut(1700,function(){
        //reset the z-index and unhide the image
        $active.css('z-index',1).show().removeClass('active');
        //make the next image the top one       
        $next.css('z-index',3).addClass('active');
    });
}

现在你只需要为每个id调用函数：

$(document).ready(function(){
    // run every 4s
   // cycleImages();
   setInterval(function(){
                cycleImages("#cycler1");
                cycleImages("#cycler2");
                cycleImages("#cycler3")
            }, 2000);
})

用javascript图库！ 1个网站上有3个画廊

1 个答案: