Question

我想从包含10-12张图片的方框一次显示3张图片。我已经有了这个脚本，它一次显示一个图像，但如何将它改变为无限次旋转3（或其他数量）？我一直在尝试使用slice()代替eq()，但我不能让它继续前进3 ...

JS：

function displayImg() {
  // Each item
  var item = $('.image');

  //initial fade-in time
  var initialFadeIn = 1000;

  //interval between items
  var itemInterval = 3000;

  //cross-fade time
  var fadeTime = 1000;

  //count number of items
  var numberOfItems = item.length;

  //set current item
  var currentItem = 0;

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

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

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

  }, itemInterval);
}

displayImg();

标记：

<div id="parent">
  <div class="image">one</div>
  <div class="image">two</div>
  <div class="image">three</div>
  <div class="image">four</div>
  <div class="image">five</div>
  <div class="image">six</div>
  <div class="image">Seven</div>
  <div class="image">Eight</div>
  <div class="image">Nine</div>
  <div class="image">Ten</div>
</div>

JsFiddle here

Answer 1

您可以使用拼接功能来完成此操作。

没有更改您的HTML

Js（我用show / hide完成了它）：

   function displayImg() {
  // Each item
  var item = $('.image');

  //initial fade-in time (in milliseconds)
  var initialFadeIn = 1000;

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

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

  //count number of items
  var numberOfItems = item.length;

  //set current item
  var currentItem = 0;
  var noOfItems=3;
  var totalItems=10;

  item.slice(currentItem, noOfItems).show()

   var infiniteLoop = setInterval(function() {
    item.slice(currentItem, noOfItems).hide()
    if(currentItem<=totalItems)
    {
        currentItem=noOfItems;
      noOfItems+=3;
    }
    else
    {
        currentItem=0;
      noOfItems=3
    }  
    item.slice(currentItem, noOfItems).show();
  }, itemInterval);
}

displayImg();

CSS：

    .image {
  display: none;
  position: relative;
  top: 0;
  left: 0;
}

我希望这会有所帮助

一次显示3张图像

1 个答案: