Question

我正在从下面显示的html结构制作旋转木马。实际上大约有40张图片。

<div id="carousel">
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
</div>

容器'carousel'垂直溢出而不是水平溢出。这是因为.pris浮动了。我不认为这是我可以轻易改变的东西，因为它会打破响应式设计并导致我需要支持的IE早期版本的噩梦。
我可以计算在父容器中可以显示多少img的轮播。最大值为4，最小值为1.
我需要循环浏览这种fashion中的图像，即逐个。左右图像适当地移入和移出容器。

我怎么能这样做，因为第一个类总是在容器的左上角，所以当隐藏/显示它时，它总是出现在那个区域而不是水平地穿过容器，因为下面的div是等级。

简而言之，如果图像不是长的，1幅图像高，水平线的容器，如何制作旋转木马？

编辑 - 我不知道为什么人们要求关闭这个问题。很明显：是否可以通过垂直堆叠而不是水平堆叠的图像制作旋转木马，通常情况下是旋转木马。

编辑（一些测试代码）在循环时工作正常，但在返回到beginnig时却没有。

右箭头：

$('#arrow_right a').click(function(e) {
var current = $('#pris').find('div.current');
var next = (current.next('.pris').length) ? current.next('.pris') :  $("div.pris:first");
current.removeClass('current');
current.hide();
next.addClass('current');
next.show();
show_next(getVisible());
e.preventDefault();
});

function show_next(no_visible)
{
current = $('#carousel').find('div.current');
 next_one = (current.next('.pris').length) ? current.next('.pris') : $("div.pris:first");
 next_two = (next_one.next('.pris').length) ? next_one.next('.pris') : $("div.pris:first");
 next_three = (next_two.next('.pris').length) ? next_two.next('.pris') : $("div.pris:first");

  switch(no_visible)
    {
    case 4:
    next_one.show();
    next_two.show();
    next_three.show();
    break;
    case 3:
    next_one.show();
    next_two.show();
    break;
    case 2:
    next_one.show();
    break;
    }
}

Answer 1

是的，这是可能的。
你想垂直动画，对吧？鉴于它是关于响应式设计的提示，你需要计算窗口负载/ + /调整一个图像（或容器高度）的高度，并分别为你的轮播scrollTop属性设置动画（假设它是一个溢出隐藏元素。）

有关制作响应式jquery轮播的建议，图像垂直溢出

1 个答案: