0

状況：

私は自分のサイトを作っていますが、今日はちょっとした問題に直面していました..

私のページでは wrap を使用しており、wrapでは 3 つの列を使用しています。中央の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 は #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 に答える