在移动视口中循环播放图像 javascript

Question

问题

我正在尝试创建一个产品卡片，该卡片在鼠标悬停时循环显示图像（对于桌面），并且当图像外部的 div 完全位于移动设备的视口内时。此外，当鼠标不再悬停时，循环停止，或者当卡片离开视口（移动）时，循环停止。

我的成就

我完成了桌面设备部分，但我不知道如何为移动设备完成...

这是我的代码

HTML+PHP

<?php for ($i=1; $i < $variable_number ; $i++) { ?>
<div class="card-image waves-effect waves-block waves-light">
                <img id="<?php echo $i; ?>" style="background-image: cover;" src="/images/shop1.jpg" data-alt-src="/images/shop2.jpg;/images/trip1.jpg;/images/trip2.jpg" class="img-loop activator">
                <div style="margin:0;" class="progress white">
                  <div id="load<?php echo $i; ?>" class="determinate black" style="width: 0%"></div>
                </div>
              </div>
<?php
          }
         } ?>

CSS

我正在使用 MaterializeCSS 框架

Javascript

var alt_src, elem, i, timeout, moving, width=0, loop_interval=2000, loader_num;

$('img.img-loop')
.mouseenter(function() {
  $(this).data('old-src', this.src);
  elem = this;
  alt_src = $(this).data('alt-src').split(';');
  i = 0;
  loader_num = this.id;
  moving = setInterval(move, (alt_src.length+1)*(loop_interval/100));
  timeout = setTimeout(loop, loop_interval);
})
.mouseout(function() {
  clearTimeout(timeout);
  clearInterval(moving);
  width = 0;
  var elem = document.getElementById("load"+loader_num);
  elem.style.width = width + '%';
  this.src = $(this).data('old-src');
});

function loop() {
if (i === alt_src.length) {
  elem.src = $(elem).data('old-src');
  i = 0;
} else {
  elem.src = alt_src[i++];
}
timeout = setTimeout(loop, loop_interval);
}

function move() {
  var elem = document.getElementById("load"+loader_num);
    if (width == 100) {
      width = 0;
    } else {
      width++;
      elem.style.width = width + '%';
    }
}

结论

我现在可以做什么来实现这个效果？我的目标是 this 这是我目前所做的 Fiddle：https://jsfiddle.net/iacopoermacora/Lytj02za/1/

Answer 1

如果您发现它是移动设备，您可以在触发滚动事件后立即浏览您的元素，然后检查一个或多个元素是否在视口内，然后为这些元素启动轮播动画元素：

function isElementInViewport (el) {
    var rect = el[0].getBoundingClientRect();
    return (rect.top>-1 && rect.bottom <= $(window).height());
}

例子来自Determine if element is either above or below fold of page

在移动视口中循环播放图像 javascript

Looping images when in viewport mobile javascript

javascript

jquery

css

viewport

shop