0

所以，我正在尝试构建一个二维内容滑块，但我在实现它时遇到了问题。我正在使用 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%。

4

1 回答 1

0

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

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

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

于 2012-08-13T20:10:51.307 回答