jquery - 100% 可调整大小的 div 在容器 div 中向左浮动

Question

是否有可能有一个包含 X 个子 div 的容器 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 都包含一个图像。

编辑 2:添加了我自己的更新 FIDDLE .

Answer 1

这是完整的工作版本: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 设置为百分比值 after 动画意味着 div 在转换后仍然可以调整大小。