1

我正在从下面显示的 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>
  • 容器“旋转木马”垂直溢出而不是水平溢出。这是因为 .pris 向左浮动。我不认为这是我可以轻易改变的,因为它会破坏响应式设计并导致我需要支持的早期版本的 IE 做噩梦。

  • 我可以计算出在父容器中可以显示多少个轮播图。最大值为 4,最小值为 1。

  • 我需要以这种方式循环浏览图像,即一张一张。左右的图像适当地移入和移出容器。

我该怎么做呢,因为第一个类总是在容器的左上角,所以当它被隐藏/显示时,它总是出现在那个区域,而不是像较低级别的 div 那样水平穿过容器。

简而言之,当图像不是长的、1 图像高的水平线中的容器时,如何制作轮播?

编辑 - 我不知道为什么人们要求结束这个问题。很清楚:是否可以从垂直堆叠而不是水平堆叠的图像 div 中制作轮播,就像轮播通常那样。

编辑(一些测试代码)在循环时可以正常工作,但在回到开始时就不行。

右箭头:

$('#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;
    }
}
4

1 回答 1

1

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

于 2013-02-04T12:50:44.773 回答