Question

我的网站需要一个新的旋转木马，用于移动版本。所以我使用html css和javascript创建了一个，但是，图像之间的切换也很简单＆＃34;。这是代码 HTML

<div class="containerr">
    <div style="display: inline-block;">
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
     <img src="https://placeimg.com/400/200/any"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/nature"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/architecture"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/animals"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/tech"/>
    </div>
  </div>

CSS

}
.containerr {
  max-width: 100%;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.containerr div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.containerr img {
  width: 100%;
  height: auto;
}

JS

var currentIndex = 0,
  items = $('.containerr div'),
  itemAmt = items.length;

function cycleItems() {
  var item = $('.containerr div').eq(currentIndex);
  items.hide();
  item.css('display','inline-block');
}

var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 3000);

$('.next').click(function() {
  clearInterval(autoSlide);
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});

$('.prev').click(function() {
  clearInterval(autoSlide);
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
  cycleItems();
});

https://codepen.io/anon/pen/PmbrWj

寻找动画/传输显示的任何提示：inline-block to display：none

Answer 1

您可以在cycleItems()函数中构建淡入/淡出效果：

function cycleItems() {
    var visibleItem = items.filter(":visible");
    var item = $('.containerr div').eq(currentIndex);
    visibleItem.fadeOut(function() {
        item.fadeIn();
    });
}

上面的代码使用jQuery过滤器来查找当前可见的项目，并仅在该项目上调用fadeOut()。然后它使用回调函数在fadeIn()完成后对当前项执行fadeOut()。

Answer 2

替换此items.hide();
使用此items.fadeOut("slow");

from display：none to display：内联块动画，图像轮播

2 个答案: