二维jQuery Slider-CSS定位

Question

因此，我正在尝试构建一个二维内容滑块，但在实现它时遇到了问题。我使用的是jQuery。

滑块标记的基本思想是：

<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） 让contentSliderdiv在多个contentBlockdiv 之间左右滑动

我目前在：http://www.ficreates.com/_SiteDemos/PBL/projects.html

我的主要问题是CSS部分。如何让div从左到右排列并在它们之间滑动？你现在可以看到我的代码，大约60%的时间都有问题。

Answer 1

我解决了这个问题，解决方案如下：

为内容块创建一个容器div。它的宽度由jQuery length属性（计算内容块的总数）乘以单个内容块的宽度（950px）来设置。然后使用.content_sliderdiv中的绝对定位从左到右定位容器div。

虚边框实际上是我的reset.css文件中设置的行高的问题（ul继承了"行高：1；"）。我用"线高：0；"来代替这一点，瞧，每张照片之间没有1.5像素的空间。

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