Question

有一个很棒的javascript库可以在iPhone上显示名为“jaipho”的照片。我正在尝试调整其滑块实现以在普通浏览器中工作，我遇到了一些问题。

以下是滑块工作原理的摘要：水平排列的图像表。该表包含在一个div中，该div具有溢出：隐藏，然后一些javascript通过将其marginLeft设置为某个负数来移动表。

更具体地说：通过在javascript中设置innerHTML，将表放在div中。每个表格单元格都是“幻灯片”类，由CSS设置为iPhone的宽度。通过调用appendChild将照片动态放置在表格单元格中，这样就不需要一次加载所有照片。

它在MobileSafari的iPhone上运行良好。当照片水平排列时，可以向左滑动视图，而下一个从右侧滑入。

现在我尝试在浏览器窗口中使用Mac。问题是为每个单元格获得一个恒定的宽度 - 我不能使用CSS，因为我想要的宽度是window.innerWidth，而不是像iPhone那样的固定宽度。我已经尝试将带有“width”标签（或“style”标签）的表格单元格设置为窗口的宽度。看看Chrome在其Javascript控制台中的想法，就好像桌子忽略了单元格设置宽度的努力，而是表格将宽度设置得非常窄，以便完全适合窗口。（或者进入它的包含div，即使它被设置为“溢出：隐藏”。）

任何人都有任何建议如何将表强制为非常非常宽的像素，即使其中只有一小部分会一次显示？

谢谢，

戴夫

Answer 1

我最近构建了这样的东西，这是结构：

<div id="outer_container" style="width: 500px; height: 100%; position: relative; overflow: hidden">
    <div id="slider" style="width: 5000px;">
        <div id="slide1" style="float: left; width: 500px;">...</div>
        <div id="slide2" style="float: left; width: 500px;">...</div>
        <div id="slide3" style="float: left; width: 500px;">...</div>
        <!-- add as many as you want, just make sure it fits in the 5000px width above -->
        <div style="clear: both;"><div>
    </div>
</div>

然后滑块通过调整'slider'div的css left属性来工作。所以基本上观察窗口是500px以及每个“幻灯片”的宽度。我想关键是每张幻灯片上的float: left。

要查看此div结构的实际效果，请查看我在this site编码的右栏中的顶部部分

Answer 2

为了使单元格具有适当的宽度，您必须调整表格宽度以容纳所有这些单元格。看看这个小提琴：http://jsfiddle.net/USRww/1/。我正在调整表的大小以容纳所有单元格，假设每个单元格将是浏览器窗口宽度的100％。我在那里使用百分比，所以一切都很流畅。

该标记正在使用你建议的表格，但我建议只使用一个容器div，每个单元格都有一堆浮动的div。

div下的图像表

2 个答案: