Question

我正在尝试创建循环播放的图像的渐变幻灯片。每个图像都有一个标题，我已应用fitty.js来使每个标题适应容器的宽度。

我正在努力弄清为什么fitty.js仅影响第一个.line元素我已经分别删除了jQuery的每个元素，并将问题缩小到如何隐藏.carousel-cell元素开始。

我想要实现的是，当您进入页面时，所有.carousel-cell元素都与第一个元素分开隐藏。然后，它们应无限循环地淡入和淡出。

这是jQuery ...

$(document).ready(function(){
  fitty('.line');
});


$('.carousel-cell').hide();
$('.carousel-cell:first').show();


setInterval(function() {
  $('.carousel-cell:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow');
}, 1000);

这是html ...

<div id="slideshow">
      <div class="carousel-cell">
        <img src="https://mrlondoner.com/couch/uploads/image/pall_mall.png" />
        <div class="line"><h1>soho</h1></div>
      </div>
      <div class="carousel-cell">
        <img src="https://mrlondoner.com/couch/uploads/image/tower_bridge.png" />
        <div class="line"><h1>tower bridge</h1></div>
      </div>     
</div>

下面的小提琴链接... https://jsfiddle.net/spittman/nv2e3czj/39/

Answer 1

fitty在调整大小时遇到问题，因为轮播会影响父元素的可见性。

无论是重构代码还是跟踪正在迭代的元素编号，您都可以对特定元素进行改装

或

有点懒，当轮播项目移至下一个并且可见父元素时，只需调用fitAll（）函数即可。例如：

setInterval(function() {
 var wee = $('.carousel-cell:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow');
fitty.fitAll();
}, 1000);

fitty.js仅适用于头等舱元素

1 个答案: