是否可以使用带有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。
答案 0 :(得分: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仍然可以调整大小。
答案 1 :(得分: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>
答案 2 :(得分:0)
您似乎已经定义了要使用的宽度,因此我建议使用最大宽度和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;
我希望这有帮助!
答案 3 :(得分:0)
也许没有定位或浮动的横向CSS基础会让你感兴趣。
body, html {
height:100%;
padding:0;
margin:0;
}
#slideshowWrapper {
overflow: hidden;
width: 100%;
height:100%;
}
#slideshowWrapper:hover {
}
#slideshowContent {
height:100%;
width:100%;
text-indent:0;
display:inline-block;
white-space:nowrap;
}
.slideshowImage_container {
height:100%;
width:100%;
display:inline-block;
white-space:normal;
text-indent:normal;
text-align:center;
}
#slideshowImage_01 {
background-color: #A0D0A8;
}
#slideshowImage_02 {
background-color: #009FE3;
}
#slideshowImage_03 {
background-color: #FCC99A;
}
#slideshowImage_04 {
background-color: #D8B0CB;
}
http://jsfiddle.net/GCyrillus/PfbnW/1/
将CSS动画作为额外内容:
(仅为表演,js更加坚实)
不太灵活,每次添加或删除容器时都需要设置它。
#slideshowWrapper {
animation: slidemeAnyDir 30s infinite;
animation-play-state:running;
}
#slideshowWrapper:hover {
animation-play-state:paused;
}
@keyframes slidemeAnyDir {
0%, 15%, 100% {text-indent:0;}
17%, 32%, 84%, 98% {text-indent:-100%;}
34%, 49%, 68%, 82% {text-indent:-200%;}
51%, 66%% {text-indent:-300%;}
}
为什么文字缩进? 因为它可以完全反应文档在屏幕上显示的方向。 它将滑动在父级或默认情况下设置方向的侧面。