文章/答案/技术大牛

发布

社区首页 >问答首页 >有javascript！3个画廊在一个网站上的画廊

问有javascript！3个画廊在一个网站上的画廊
EN

Stack Overflow用户

提问于 2014-02-10 19:18:50

回答 1查看 55关注 0票数 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/

javascript

gallery

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-11 17:55:52

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

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

由于cycler的i现在不同(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);
})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21685976

复制

相似问题

问有javascript！3个画廊在一个网站上的画廊
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有javascript！3个画廊在一个网站上的画廊EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有javascript！3个画廊在一个网站上的画廊
EN