我正在根据下面所示的 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。
我需要循环浏览这种 fashion 中的图像,即一一对应。左右图像适本地移入和移出容器。
鉴于第一个类始终位于容器的左上角,因此当它隐藏/显示时,它将始终出现在该区域中,而不是像下部的 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;
}
}
最佳答案
是的,这是可能的。
您想要垂直动画,对吧?考虑到它是关于响应式设计的提示,您需要计算窗口加载/+/调整一个图像的高度(或容器高度)并分别为您的轮播滚动顶部属性设置动画(考虑到它是一个溢出隐藏元素。)
关于javascript - 关于制作图像垂直溢出的响应式 jquery 轮播的建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14686985/