0

我需要在我的页面上插入 3 个 jquery 图像旋转器（infinite-rotator.js）。每个将显示不同的图像，但所有画廊将具有相同的功能。

我已经完成了 3 个 div，每个 div 都有一个 ID。三个画廊工作，但不是同时工作。当第一个画廊图像结束时，会出现第二个画廊图像。当这些图像结束时，第三个画廊开始了。我需要 3 个画廊同时启动并相互独立运行。

我是初学者，所以如果有人可以帮助我，我会很感激。

HTML 代码：

<div id="rotating-item-wrapper">
  <img src="images/inicio_mini01_01.jpg" alt="photo of building across from our office" class="rotating-item" width="308" height="303" />
  <img src="images/inicio_mini01_02.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="308" height="303" />
</div>
<div id="rotating-item-wrapper2">
  <img src="images/inicio_mini02_01.jpg" alt="photo of building across from our office" class="rotating-item" width="308" height="303" />
  <img src="images/inicio_mini02_02.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="308" height="303" />
</div>
<div id="rotating-item-wrapper3">
  <img src="images/inicio_mini03_01.jpg" alt="photo of building across from our office" class="rotating-item" width="308" height="303" />
  <img src="images/inicio_mini03_02.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="308" height="303" />
</div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>
<script type='text/javascript' src='scripts/infinite-rotator.js'></script>

在 JAVASCRIPT 中：

$(window).load(function () { //start after HTML, images have loaded

  var InfiniteRotator = {
    init: function () {
      //initial fade-in time (in milliseconds)
      var initialFadeIn = 1000;
      //interval between items (in milliseconds)
      var itemInterval = 5000;
      //cross-fade time (in milliseconds)
      var fadeTime = 2500;
      //count number of items
      var numberOfItems = $('.rotating-item').length;
      //set current item
      var currentItem = 0;
      //show first item
      $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

      //loop through the items      
      var infiniteLoop = setInterval(function () {
        $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
          currentItem = 0;
        } else {
          currentItem++;
        }
        $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

      }, itemInterval);
    }
  };
  InfiniteRotator.init();
});
4

1 回答 1

0

将您的 JS 更改为此标记：

$(window).load(function () { //start after HTML, images have loaded

    var InfiniteRotator = {
        init: function ($elem) {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 1000;
            //interval between items (in milliseconds)
            var itemInterval = 5000;
            //cross-fade time (in milliseconds)
            var fadeTime = 2500;
            //count number of items
            var numberOfItems = $elem.find('.rotating-item').length;
            //set current item
            var currentItem = 0;
            //show first item
            $elem.find('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items      
            var infiniteLoop = setInterval(function () {
                $elem.find('.rotating-item').eq(currentItem).fadeOut(fadeTime);

                if (currentItem == numberOfItems - 1) {
                    currentItem = 0;
                } else {
                    currentItem++;
                }
                $elem.find('.rotating-item').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };

    $('.rotating-item-wrapper').each(function(idx, elem){
        InfiniteRotator.init( $(elem) );
    });

});


我不是只调用init一次，而是使用 jQuery 函数为类 rotating-item-wrapper的每次出现运行该函数。
另一个重要的技巧是将相应的元素作为属性传递给init函数。

    $('.rotating-item-wrapper').each(function(idx, elem){
        InfiniteRotator.init( $(elem) );
    });

如您所见，我还更改了函数体并替换了每个出现的：$('.rotating-item')以$elem.find('.rotating-item')区分旋转器。



此外，最好使用一个类，而不是包装器上的不同 ID（在我的示例中，我使用了 : rotating-item-wrapper，您也需要更改它，以使示例正常工作！）。

于 2013-04-21T10:36:45.380 回答