javascript - 在 JavaScript 中旋转图像

Question

对于了解 JS 的人来说应该是一个简单的问题。

我有一个网页，页脚中有 4 个旋转的图像。

<div class="column_w190 fl margin_right_40">
    <!-- START: Rotating Images -->
    <div id="rotating-item-wrapper">
        <img src="images/Rotating/greenpeople.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/entrance.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/bluepeople.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/reflection3.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/reflection2.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/manequine.jpg" alt="image" class="rotating-item" width="175" height="175" />    
    </div><!-- END: Rotating images images -->
    <p>Straffen Toebak</p>
</div>

我在网上找到的脚本中定义了 rotating-item 的地方:

$(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 = 2000;

      //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();

});

问题是，当我添加第二列也应该有旋转图像时，第二列中的图像现在会依次显示，即它将显示 left:1, left:2, left3, left4, left5, left6 , right1, right2 而不是左 1 + 右 1，左​​ 2 + 右 2。

所以我猜你不能将右侧的图像添加到同一个类“rotating-item”，但我不知道在 JS 中如何启动该类的新实例。

Answer 1

表达式 $('.rotating-item') 从 DOM 中抓取所有具有 class="rotating-item" 的 HTML 元素，顺序与它在 DOM 中的显示顺序相同页面顶部向下，它并不关心它们在不同的列中。

我想，您需要两个带有旋转(过渡)图像的 DIV。我认为可以这样解决:

/* your JavaScript */
function rotateImages (container) // CONTAINER -- WHERE IT SHALL ROTATE IMAGES
 {
    var initialFadeIn = 1000; // in miliseconds
    var itemInterval = 2000; // in miliseconds
    var fadeTime = 2500; // in miliseconds
    var currentItem = 0; //set current item


    // WE FIND ALL IMAGES IN THE CONTAINER
    // NO FURTHER NEED FOR class="rotating-item"
    var images = container.find('img');

    // HIDE ALL IMAGES
    images.hide()

    // show first item
    images.eq(currentItem).fadeIn(initialFadeIn);

    // loop through the items
    // TIMER ID IS RETURNED FROM THIS FUNCTION,
    // SO YOU CAN TERMINATE ROTATING IN FUTURE
    return setInterval(function(){
        images.eq(currentItem).fadeOut(fadeTime);

        if(currentItem === images.length -1)
            currentItem = 0;
        else
            currentItem++;

        images.eq(currentItem).fadeIn(fadeTime);
        }, itemInterval);   
    }   
};

然后你为每一列设置唯一的id，你想在其中旋转图像，例如:

<!-- your HTML -->
<div id="rotating-item-wrapper-ONE">
    <!-- the img elements does not need to have special class,
       it will rotate all img in this div -->
    <img ...></img>
    <img ...></img>
</div>
<div id="rotating-item-wrapper-TWO">
    <img ...></img>
    <img ...></img>
    ...
</div>

最后，您在 JavaScript 中使用 jQuery 选择器分别为每一列启动旋转器以获取它们的 ID:

/* your JavaScript */
var col1 = $('#rotating-item-wrapper-ONE')
var col2 = $('#rotating-item-wrapper-TWO')
var timer1 = rotateImages(col1);
var timer2 = rotateImages(col2);

然后您可以调用 clearInterval() 来停止旋转，即:

/* your JavaScript */
// as a result of some action
clearInterval(timer1) // stops rotating in col1