Question

如何在多个div上同时运行一个函数（在这种情况下为动画。可选择使用jquery）？

从http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/开始

尝试扩展它以便动画同时在中心div的左侧和右侧的div上播放。从id更改为class但它在一个div上播放，然后在另一个div上播放。希望它同时在两者上播放。

＆＃13;

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

＆＃13;

.rotating-item-wrapper {
  position: relative;
  width: 320px;
  height: 240px;
  /* background-color: red; */
}

.rotating-item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<body>
  <div class="centered-content row">
    <div class="column rotating-item-wrapper">
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-1.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-2.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-3.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-6.jpg" class="rotating-item" width="320" height="240"/>
    </div>
    <div class="column">
      Texty stuff
    </div>
    <div class="column rotating-item-wrapper">
      <img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
      <img src="https://www.ford.com/campaignlibs/content/dam/ford_com/en_us/gtreveal/doc_part_2_1.jpg" class="rotating-item" width="320" height="240"/>
      <img src="https://2.bp.blogspot.com/-OSLF3ue4tbc/Vczt0IPTHHI/AAAAAAAAG-0/zdQ82j3gQPU/s1600/Forza-Motorsport-6-Ford.jpg" class="rotating-item" width="320" height="240"/>
      <img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
    </div>
  </div>
</body>

＆＃13;

Answer 1

在get_success_url处将$(".rotating-item-wrapper")传递给.init()，在.each()内使用带有参数.find()的{{1}}来引用".rotating-item"元素每个父.init()元素。

另外，将.rotating-item替换为.rotating-item-wrapper

＆＃13;

$(function(){})

＆＃13;

$(window).load()

＆＃13;

$(function() { //start after HTML, images have loaded

  var InfiniteRotator = {
    init: function(el) {
      //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
      el.find('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

      //loop through the items		
      var infiniteLoop = setInterval(function() {
        el.find('.rotating-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
          currentItem = 0;
        } else {
          currentItem++;
        }
        el.find('.rotating-item').eq(currentItem).fadeIn(fadeTime);

      }, itemInterval);
    }
  };

  $(".rotating-item-wrapper").each(function() {
    InfiniteRotator.init($(this))
  });

});

＆＃13;

你如何同时在多个div上运行一个函数？

1 个答案: