jquery - 二维 jQuery slider - CSS 定位

Question

所以，我正在尝试构建一个二维内容 slider ，但在实现它时遇到了问题。我正在使用 jQuery。

slider 标记的基本思想是:

<div id="contentSlider">
    <div class="contentBlock">
        <div class="pictures">
            <ul>
                <li>
                    <img src="img1.jpg" />
                </li>
                <li>
                    <img src="img2.jpg" />
                </li>
                <li>
                    <img src="img3.jpg" />
                </li>
            </ul>
            <div class="absPositionedNavUp></div>
            <div class="absPositionedNavDown></div>
        </div>
        <div class="text">
            <p>
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
            </p>
            <p>
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
            </p>
        </div>
    </div>
    <div class="contentBlock">
        ........
    </div>
    <div class="contentBlock">
        ........
    </div>
</div>
<div class="slideAllContentLeft"></div>
<div class="slideAllContentRight"></div>

我正在尝试做的(并且我已经能够让某些部分工作)是:

(1)让图片div在图片间上下滑动

(2)让contentSlider div在多个contentBlock div之间左右滑动

我目前拥有的是:http://www.ficreates.com/_SiteDemos/PBL/projects.html

我的主要问题是它的 CSS 部分。如何让 div 从左到右排列并在它们之间滑动？您目前可以看到我的代码，大概完成了 60%。

Answer 1

我解决了这个问题，解决方案是这样的:

为内容 block 创建一个容器 div。它的宽度设置为:jQuery 长度属性(计算内容 block 的总数)乘以单个内容 block 的宽度 (950px)。然后使用 .content_slider div 中的绝对定位从左到右定位容器 div。

幻影边框实际上是在我的 reset.css 文件中设置的行高问题(ul 继承了“行高:1；”)。我用“line-height: 0;”覆盖了它瞧，单张照片之间不再有 1.5 像素的空间。

• 查看最终产品:http://www.ficreates.com/_SiteDemos/PBL/projects.html
• 对于 javascript，请访问:http://www.ficreates.com/_SiteDemos/PBL/scripts/projWidg.js