2012-07-27 58 views
0

所以,我试图建立一个二维的内容滑块,我遇到了实现它的问题。我正在使用jQuery。2维jQuery滑块 - CSS定位

滑块标记的基本思路是:

<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向左滑动和多内文的div

什么我现在是在右侧之间:http://www.ficreates.com/_SiteDemos/PBL/projects.html

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

+0

是我在与(不是一个巨大的交易)问题的另一件事情是:照片的高度正好是330px,但它们之间存在不明原因的边界/边界。我将幻灯片数量设置为332px,但是边距必须是部分像素数量(像1.5px或类似的东西),因为最终下一张照片的边缘会开始蠕变。 – 2012-07-27 15:54:16

+0

我建议将最后一张图像在第一次初始化之前,所以如果用户第一次上升,用户将看不到黑色方块。如果用户在第一个之前上升(我认为这是最下一个),在最后一个之后第一个下降。 – 11684 2012-07-27 15:56:02

+0

对于margin-thing,请尝试像'margin:0;','border-width:0;''padding:0;'一般的重置。 – 11684 2012-07-27 15:56:52

回答

0

我解决了这个问题,解决的办法是像下面这样:

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

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