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

});

问题在于，当我添加第二列也应该有旋转图像时，第二列中的图像现在会连续显示，即它将显示左：1，左：2，左3，左4，左5，左6 ，right1，right2而不是 left1 + right1，left2 + right2。

所以我猜你不能把右边的图像添加到同一个班级＆＃34;旋转项目＆＃34;，但我不知道在JS中怎么样启动该类的新实例。

Answer 1

表达式$('.rotating-item')从DOM中抓取所有带有class="rotating-item"的HTML元素，因为它从页面顶部向下呈现在DOM中，并且它并不关心它们在不同的列中。 / p>

我认为，你想要两个具有旋转（过渡）图像的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') });

在JavaScript中旋转图像

2 个答案: