如何测试一个“旋转木马”中的元素（一个具有溢出容器：隐藏\”有多个大型儿童）是视觉可见？(How t

我在寻找一个通用的（本地）JavaScript函数，可以告诉我们，如果一个元素是可见的，可以考虑元素在“旋转木马”（又名“滑块”）;
这些通常是与“幻灯片”，每个被定位到前一个左（或右）元素的容器 - 但其中只有一个是实际可见。
一个例子可以看出，在这个网页： http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/

编辑：用于与3个滑动的圆盘传送带的一个例子：

<div class="carousel">
    <div class="slide" style="left:0"><img src="..." /></div>
    <div class="slide" style="left:640px"><img src="..." /></div>
    <div class="slide" style="left:1280px"><img src="..." /></div>
</div>

<style>
   .carousel  {
      width: 640px;
      height: 460px;
      overflow: hidden;
   }
   .slide {
      position: absolute;
      width: 100%;
      height: 100%;
   }

</style>

该函数将返回false的图像在转盘中不能直接看到。

我试过关于能见度检测答案建议在SO对问题的许多技术，在他们之中-检查offsetParent ， offsetLeft ， offsetRight ，以及使用getComputedStyle和检查display ，更多的，但他们都返回true的旋转木马的不可见图像。

回答我的问题。

// This function will return true if an element inside a "carousel" is visually invisible.
function isOffsetHidden(elem) {
  if (elem.nodeName == "BODY") return false;
  // find out if any parent of the element has 'overflow:hidden':
  var p = elem, isOverflow = false;
  while ((p=p.parentNode) && p.nodeName!=="BODY") {
    if (window.getComputedStyle(p)['overflow']=="hidden") {
      isOverflow = true;
      break;
    }
  }
  if (isOverflow) {
    var er = elem.getBoundingClientRect(),
        pr = p.getBoundingClientRect();

    return (er.right < pr.left || er.bottom < pr.top || er.left < pr.right || er.top < pr.bottom);

  }
  return false;
}

它的工作原理是首先试图找到与容器overflow:hidden ，那么如果元素是一个容器内overflow:hidden和容器的“边界之外”，该函数返回true 。

在while循环，我们需要停下来当元素是body ，否则将持续到Document ，并会抛出一个错误，指出该说法window.getComputedStyle “没有实现Element接口”。

我还重新编辑问题的标题更具体的问题。