0

情况：

我正在制作自己的网站，今天我遇到了一个小问题..

在我的页面上，我使用wrap，在 wrap 中我使用三列，在中间，main，我使用灰色图像作为背景。主要是我想要一些文本和幻灯片，但是图像必须适应，当我使用简单的文本时，这有效（图像与文本一样长）。

问题：

在我的文字下，我想要一个简单的幻灯片，没什么特别的。但是当我将幻灯片放在主要位置时，图像不适应..？它不被认作主元素吗？

代码：

对于html页面，这是我的代码：

    <div id="main">
       <p id="Title">Welcome</p>    
       <p>Some text here</p>
       <p>
           <div id="slideshow2">

               <div class="slide active"><img src="images/1.png" alt="Slideshow Image 1" /></a>
               </div>
               <div class="slide"><img src="images/2.png" alt="Slideshow Image 2" /></a>
               </div>
               <div class="slide"><img src="images/3.png" alt="Slideshow Image 3" /></a>
               </div>

           </div>
        </p>

    </div>

我正在使用脚本来操作幻灯片，这是完美的，所以不需要发布这个。

在CSS中我这样做：

    #slideshow2{
      position: absolute;
    }
    #slideshow2 .slide {
      position:absolute;
      top:0;
      left:0;
      z-index:8;
      opacity:0.0;
    }
    #slideshow2 div.active {
      z-index:10;
      opacity:1.0;
    }
    #slideshow2 div.last-active {
      z-index:9;
    }

    #main{
      padding-top: 1px;
      padding-bottom: 3px;
      padding-left: 5px;
      padding-right: 5px;
      margin-left: auto;
      margin-right: auto;
      width: 800px;
      background: url("images/main.png") repeat;
      z-index: 1;
    }

和包装：

    #wrap{
      margin-left: auto;
      margin-right: auto;
      width: 1240px;
      height: auto;
      min-height: 100%;
      position: relative;
    }

我希望有人可以帮助我，因为我不知道如何解决这个问题..

更新：

我试图这样做：

    <p id="slideshow2">
        <div class="slide active"><img src="images/1.png" alt="Slideshow Image 1" /></a>
        </div>
        <div class="slide"><img src="images/2.png" alt="Slideshow Image 2" /></a>
        </div>
        <div class="slide"><img src="images/3.png" alt="Slideshow Image 3" /></a>
        </div>
   </p>

这里主要将幻灯片识别为一个元素，但所有图像都放置在彼此下方而不是彼此上方。

脚本：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script type="text/javascript">
        function slideSwitch() {
        var $active = $('#slideshow div.active');

        if ( $active.length == 0 ) $active = $('#slideshow div:last');

        var $next = $active.next().length ? $active.next()
        : $('#slideshow div:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
        });
        }

        $(function() {
        setInterval( "slideSwitch()", 3500 );
        });
    </script>

请帮忙 ：）

谢谢

4

2 回答 2

1

您正在使用的幻灯片脚本是否出于某种原因要求您使用锚点关闭标签而没有相应的开始标签？如果没有，也许它正在傻眼。

另外，这个问题中的“适应”是什么意思？

但是好的，问题是绝对定位的元素离开了正常的文档流。它们的高度不会影响其容器的高度。所以是的，你是对的，出于元素高度的目的，它们不被识别为 main 中的元素。就像现在一样，#main 的高度仅基于 #slideshow2 之外的文本。

作为一个快速修复，试试这个：

#slideshow2 {
    position: relative;
    height: 400px;
}

或者无论图像的高度是多少，如果它们是一致的

如果幻灯片的大小是可变的，请将其添加到 slideSwitch() ：

var slideHeight = $next.height();
$next.parent().height( slideHeight );

像这样：

<script type="text/javascript">
    function slideSwitch() {
    var $active = $('#slideshow div.active');

    if ( $active.length == 0 ) $active = $('#slideshow div:last');

    var $next = $active.next().length ? $active.next()
    : $('#slideshow div:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }

    // set the #slideshow2 height
    $next.parent().height( $next.height() );

    $(function() {
    setInterval( "slideSwitch()", 3500 );
    });
</script>

虽然也许这都是废话，问题是你把#slideshow的ID改成了#slideshow2，但是你的脚本还是引用了#slideshow

于 2013-06-29T11:09:16.007 回答
0 
#slideshow2{
  position: absolute;
}

应该有大小，因为内容也是绝对的。

于 2013-06-29T10:14:31.480 回答