使用CSS将一行图像向上滑动到引导面板主体上的循环中

我对

bootstrap

和

CSS

比较陌生。我的幻灯片动画有问题，我需要将其保存在面板主体中。理想情况下，我希望通过

CSS

而不是

jQuery

来完成这一点

如果我有36个缩略图，我希望有一个

面板主体

，它一次“旋转”（向上滑动）一行12个单列图像，并循环。类似这样（我使用的是

angularjs

）：

此面板中的任何内容都会被剩余的24幅图像所覆盖
应该是不可见的，除非他们穿过可见的
上方面板主体中的“slideup”div。

正如我在代码中所评论的，问题是我可以看到整个图像块向上滑动，覆盖了所有可能位于div之下的内容，而这些内容只应该在div中可见

非常感谢您的帮助。

隐藏溢出信息 通过在

div.slideup

上设置一个固定的高度并隐藏任何溢出，您可以通过CSS简单地防止看到额外的图像：

.slideup {
  overflow-y: hidden;
  height: 180px;
}
.slideup > div {
  position: relative;
  top: 0;
  height: 180px;
  padding: 0;
}
.slideup > div > img {
  height: 150px;
  padding: 0;
  margin: 15px;
}

滚动 滚动的代码基本上非常简单：您只需按一定间隔调整

div.slideup

元素的

top

值。因为我们使用的是angular，所以我将其设置为

$scope.offset

：

$scope.offset = 0;
var interval = setInterval(function () {
    $scope.offset += -10;
    $scope.$apply();
},
200);

使滚动连续 最棘手的部分是连续滚动。要做到这一点，您必须在图像不可见时删除它们，然后再次将它们添加到

$scope.entities

数组的底部。此时，还需要重置

$scope.offset

的值。所有这些都可以通过angular的

$scope.$watch

实现：

$scope.$watch('offset', function(newValue, oldValue, scope) {
  if (newValue == -180) {
    $scope.offset = 0;
    var removed = scope.entities.splice(0, 12);
    removed.forEach(function (item) {
      scope.entities.push(item);
    });
  }
});

请参阅下面的代码片段，以查看此操作

angular.module（'app'，[]）；
角度.module（'app'）.controller（'ctrl'，['$scope'，'，
职能（$范围）{
变量占位符10={
logoUrl:'https://placehold.it/30x150'
};
变量占位符20={
logoUrl:'https://placehold.it/20x150'
};
$scope.entities=[]；
对于（变量i=0；i<18；i++）{
$scope.entities.push（angular.copy（占位符10））；
}
对于（变量i=0；i<18；i++）{
$scope.entities.push（angular.copy（占位符20））；
}
$scope.offset=0；
$scope.$watch（'offset'，函数（newValue，oldValue，scope）{
如果（新值==-180）{
$scope.offset=0；
移除的var=范围.实体.拼接（0,12）；
删除。forEach（功能（项目）{
范围.实体.推送（项目）；
});
}
});
var interval=setInterval（函数（）{
$scope.offset+=-10；
$scope.$apply（）；
},
100);
}
]);
.slideup{
溢出y：隐藏；
高度：180像素；
}
.slideup>div{
位置：相对位置；
排名：0；
高度：180像素；
填充：0；
}
.slideup>div>img{
高度：150像素；
填充：0；
利润率：15px；
}

此面板中的任何内容都会被剩余的24个图像覆盖，这些图像应该是不可见的，除非它们通过上面面板主体中可见的“slideup”div。
你知道图像的最大高度吗？是的，它们将是150px
$scope.$watch('offset', function(newValue, oldValue, scope) {
  if (newValue == -180) {
    $scope.offset = 0;
    var removed = scope.entities.splice(0, 12);
    removed.forEach(function (item) {
      scope.entities.push(item);
    });
  }
});