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）让contentSlider div在多个contentBlock div之间左右滑动

我目前所处的位置是：http://www.ficreates.com/_SiteDemos/PBL/projects.html

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

Answer 1

我解决了问题，解决方法如下：

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

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

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

2维jQuery滑块 - CSS定位

1 个答案: