在 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>

我在网上找到的脚本中定义了旋转项目：

$(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>

最后，您使用 jQuery 选择器为每列分别启动旋转器，以获取它们在 JavaScript 中的 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

Answer 2

感谢 Dan Prince，我没有完全按照您的建议解决它，因为我无法完全弄清楚在哪里放置什么（我是 JS/HTML 新手）。

但是您确实为我指明了正确的方向（将容器传递给函数）；下面的解决方案可能不是您见过的最漂亮的解决方案，但它解决了它，而无需我复制每个旋转图像的所有代码。

---

function my_init(container){var initialFadeIn = 1000; //initial fade-in time (in milliseconds)

//interval between items (in milliseconds)
var itemInterval = 2000;

//cross-fade time (in milliseconds)
var fadeTime = 2500;

//count number of items
var numberOfItems = $(container).length;

//set current item
var currentItem = 0;

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

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

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

}, itemInterval);} 



$(window).load(function () { my_init('.rotating-item'); my_init('.rotating-item2'); my_init('.rotating-item3'); my_init('.rotating-item4') });