6

X 個の子 div を含むコンテナー div を作成し、それぞれをブラウザーで 100% サイズ変更できますか? 単一の背景で実行できることはわかっていますが、divの行では実行できません...これが私がやろうとしていることです(左右にスライドするスライドショー):

ここに画像の説明を入力

HTML:

<div id="slideshowContent">
  <div id="slideshowImage_01" class="slideshowImage_container"></div>
  <div id="slideshowImage_02" class="slideshowImage_container"></div>
  <div id="slideshowImage_03" class="slideshowImage_container"></div>
  <div id="slideshowImage_04" class="slideshowImage_container"></div>
</div> <!-- End of id="slideshowContent" -->

...そしてCSS：

#slideshowContainer {
  z-index: 0;
  width: 11520px; height: 1080px;
  position: relative;
}

.slideshowImage {
  width: 1920px; height: 1080px;
  float: left;
}

ありがとう。

ペドロ

編集 1: 個々の div ごとに画像が含まれていることを忘れていました。

EDIT 2:私自身の更新されたFIDDLEを追加しました。

4

4 に答える 4

3

完全に機能するバージョンは次のとおりです: http://jsfiddle.net/y9zcf/7/

センタリングは CSS を使用して行われ、javascript はスライドショーを実行するだけです。

HTML:

<div id="slideshowWrapper">
    <div id="slideshowContent">
        <div id="slideshowImage_01" class="slideshowImage_container active"></div>
        <div id="slideshowImage_02" class="slideshowImage_container"></div>
        <div id="slideshowImage_03" class="slideshowImage_container"></div>
        <div id="slideshowImage_04" class="slideshowImage_container"></div>
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#slideshowContent {
    width: 400%; // 100% * number of slides
    height: 100%;
    position: relative;
}
#slideshowContent .slideshowImage_container {
    width: 25%; // 100% / number of slides
    height: 100%;
    float: left;
}

JS:

function slide() {
    var container = $('#slideshowContent'),
        nextDiv = container.find('.active').next('div'),
        slides = container.find('div'),
        next = nextDiv.length ? nextDiv : slides.first();

    slides.removeClass('active');
    next.addClass('active');
    $('#slideshowContent').animate({
        'left': '-' + next.index() * next.width() + 'px'
    }, 2000, function () {
        $(this).css({
            'left': '-' + next.index() * 100 + '%'
        });
    });

}

setInterval(function () {
    slide();
}, 5000);

これは 100% サイズ変更可能で、#slideshowWrapper任意の幅/高さに設定でき、内部の div は正常に機能します。アニメーション後に CSS をパーセント値に設定すると、遷移後も div のサイズを変更できます。

于 2013-06-04T14:26:11.967 に答える
0

私が考えることができる唯一の方法は、javascriptを使用することです

CSS

#SlideShow {
    width:100%;
    overflow-x:hidden;
    position: relative;
}

#slideshowContent {
  z-index: 0;
  width: 11520px; 
  height: 1080px;
  position:absolute;
  left:0px;
  top:0px;
}

.slideshowImage_container img {
  max-width:100%;
}

JS

window.slideWidth = 0;
jQuery(document).ready(function(){
    window.onresize = funciton() {
        var window.slideWidth = jQUery("#SlideShow").width();
        jQuery("#slideshowContent slideshowImage_container").css("width",window.slideWidth+"px");
        jQuery("#slideshowContent").css("left","0px"); //or adjust the left to the current slide show image since they are now different lengths and the slideshow will be off.
    }
    window.resize();
});

window.slideWidth をスライド量として使用するようにスライド テクニックを設定し、#slideshowContent左または右にスライドします。

HTML

<div id="SlideShow">
  <div id="slideshowContent">
    <div id="slideshowImage_01" class="slideshowImage_container"></div>
    <div id="slideshowImage_02" class="slideshowImage_container"></div>
    <div id="slideshowImage_03" class="slideshowImage_container"></div>
    <div id="slideshowImage_04" class="slideshowImage_container"></div>
  </div>
</div>
于 2013-06-04T13:52:34.703 に答える
0

使用したい幅を定義したようですので、max-width と 100% 幅を使用して、問題が解決するかどうかを確認することをお勧めします。

#slideshowContainer {
  z-index: 0;
  width: 100%;
  max-width: 1520px; 
  position: relative;
}

.slideshowImage {
  width: 100%;
  max-width: 1920px; 
  float: left;
}

高さを省略すると、自動的に計算されます。高さを省略したくない場合は、幅と同じように高さを設定できます...

height: auto;
max-height: 1080px;

これが役立つことを願っています！

于 2013-06-04T14:00:36.997 に答える