使用javascript的画廊！ 1个网站上的3个画廊

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> 

由于IDS的循环仪现在不同（cycler1，cycler2，cycler3）我改变了CSS来此：

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

最后用javascript将它连接起来。这段代码几乎与您的差异一样。代替将id选择器#cylcer硬编码到函数中，我传递了id选择器作为参数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); 
})