3

我正在为移动设备滑动图库制作一个片段。你可以在这里看到它http://codepen.io/piatra/full/Edtlq

[].forEach.call(slides, function(s){
    s.style.width = mainContainer.offsetWidth + 'px';
});

我的问题：因为内容由多个面板组成，所以它们需要位于右侧的同一行。面板的大小应为屏幕的 100%，因此您一次只能看到一个面板。但我不能将 css 中面板的大小设置为 100%，因为这会将每个面板推到自己的行上。

目前我正在用 JS 解决这个问题， ontouchstart我得到了主父级的大小并将每张幻灯片设置为该宽度，但我不喜欢这个解决方案，因为当切换横向到纵向时，你必须触摸画廊才能更新，并且即使我在更改中添加了一个事件列表器，它仍然不是一个很好的解决方案。

我只能在 CSS 中实现这种效果吗？同一行上的面板库，宽度变量基于父级？

PS：Chrome 开发工具 > 模拟触摸事件

PPS：写了一个简化版本http://codepen.io/piatra/pen/usaHo 非常欢迎对此版本的任何改进:)

一个很好的例子是http://csscience.com/responsiveslidercss3/但是当添加一个新面板时你必须编辑 CSS

4

1 回答 1

0

我认为这不能用纯 css 完成，特别是因为您希望它易于维护，而无需在添加更多窗格时更改 css。

一种解决方案是使用 jquery 来计算窗格，然后相应地设置 wrappe 宽度和窗格宽度以达到所需的效果：

http://jsbin.com/idufaj/6/edit

您可以添加任意数量的窗格，效果将始终存在。

$(document).ready(function() {

var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
  $(".pane").css({width: panewidth });
});

在此示例中，我使用 body 作为包装器，但它可以是任何元素。在这种情况下，由于有 3 个窗格，因此主体宽度设置为 300%，窗格宽度设置为 33.3%。如果添加另一个窗格，则主体宽度将为 400%，窗格宽度将为 25%，依此类推。

于 2012-12-29T09:53:16.093 回答