Question

我想在div中放置三个jquery幻灯片。不知何故，没有任何CSS定位幻灯片不会显示在彼此之下，而是堆叠。我怎么能让sildes显示在彼此之下，就像正常的div一样？

    <div id="slidecontainer" style="background-color: red;">

<div id="q1">
        <img src="merkel01.jpg"/>
        <img src="merkel02.jpg"/>
        <img src="merkel03.jpg"/>
        <img src="merkel04.jpg"/>
        <img src="merkel05.jpg"/>
    </div>

<div id="q2">
        <img src="poyan01.jpg"/>
        <img src="poyan02.jpg"/>
        <img src="poyan03.jpg"/>
        <img src="poyan04.jpg"/>
        <img src="poyan05.jpg"/>
        <img src="poyan06.jpg"/>
  </div>


 <div id="q3">
        <img src="mirage01.jpg"/>
        <img src="mirage02.jpg"/>
        <img src="mirage03.jpg"/>
        <img src="mirage04.jpg"/>
        <img src="mirage05.jpg"/>

  </div>


  <div>TEST</div>
  <div>TEST222</div>
  <div>TEST333</div>

 </div>

另外，如果我添加额外的test-div，它们也将被放置在三个堆叠的幻灯片下...任何帮助vermy非常赞赏!!

FUSI

Answer 1

你能给我们一个循环插件源代码的链接吗？

即使可能不涉及CSS，插件仍然可以使用jQuery执行此操作，这基本上是相同的：element.css('position', 'absolute')

我会在这里走出困境，并建议你寻找在div上应用绝对定位并将absolute更改为static的任何地方，因为这是最可能的原因。你的叠加div。

修改：如果您正在使用http://jquery.malsup.com/cycle/

，请找到它发生的位置

即使可能会打破它正常工作，你也应该能够根据自己的喜好进行调整。

查找此行（jquery.cycle.js中的259）：

$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {

将其更改为：

$slides.hide().each(function(i) {

并删除此行（261）：

$(this).css('z-index', z)

以下几行。

有关jQuery的css方法的更多信息：http://api.jquery.com/css/

jquery循环插件div总是堆积问题

1 个答案: