我尝试制作垂直/水平居中的流畅幻灯片,但似乎是这样,幻灯片放映不是在Internet Explorer 7中垂直居中,并且Internet Explorer 9和10存在一些问题。也许有人可以帮我改进我的代码。 垂直中心的顶部和底部边缘也存在一些像素差异。
由于
工作示例:http://goo.gl/DesJo
已使用:ResponsiveSlides
PS:有没有办法预加载所有图像?
HTML:
<div id="content">
<article class="layer">
<div class="wrap">
<ul class="rslides">
<li><img src="01.jpg" alt=""></li>
<li><img src="02.jpg" alt=""></li>
<li><img src="03.jpg" alt=""></li>
<li><img src="04.jpg" alt=""></li>
<li><img src="05.jpg" alt=""></li>
<li><img src="06.jpg" alt=""></li>
<li><img src="07.jpg" alt=""></li>
<li><img src="08.jpg" alt=""></li>
<li><img src="09.jpg" alt=""></li>
</ul>
</div>
</article>
<article class="layer"></article>
</div>
JavaScript的:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/resize.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
fx: 'fade',
speed: 0,
timeout: 3000,
random: true
});
});
</script>
resize.js
/*window.onresize = function(){
$('article.layer img').css({
maxHeight: $('article.layer').height() * 0.8,
maxWidth: $('article.layer').width() * 0.8
});
};*/
$(window).resize(function(){
$('article.layer img').css({
maxHeight: $('article.layer').height() * 0.8,
maxWidth: $('article.layer').width() * 0.8
});
});
CSS(没有CSSreset和菜单)
body {
font-family: 'theantiquab_w5_plainregular';
color: #000;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
color: #e84a36;
}
@font-face {
font-family: 'theantiquab_w5_plainregular';
src: url('theantiqua-webfont.eot');
src: url('theantiqua-webfont.eot?#iefix') format('embedded-opentype'), url('theantiqua-webfont.woff') format('woff'), url('theantiqua-webfont.ttf') format('truetype'), url('theantiqua-webfont.svg#theantiquab_w5_plainregular') format('svg');
font-weight: normal;
font-style: normal;
}
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
html, body, #content {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
article.layer {
position: relative;
display: table;
height: 100%;
width: 100%;
}
div.wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
}
article.layer img {
max-width: 80%;
max-height: 80%;
}
/* http://responsive-slides.viljamis.com */
.rslides {
display: inline-block;
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
float: left;
}
.rslides img {
height: auto;
border: 0;
}
答案 0 :(得分:0)
这里的问题是IE 7不支持css display:table-cell所以你应该添加一个表来使内容居中。
<!--[if gt IE 7]><!--><div id="content">
<article class="layer">
<div class="wrap"><!--<![endif]-->
<!--[if lte IE 7]><table class="layer" style="margin:0 auto;height:100%;"><tr><td class="wrap" style="vertical-align:middle;"><![endif]-->
<ul class="rslides">
<li><img src="01.jpg" alt=""></li>
<li><img src="02.jpg" alt=""></li>
<li><img src="03.jpg" alt=""></li>
<li><img src="04.jpg" alt=""></li>
<li><img src="05.jpg" alt=""></li>
<li><img src="06.jpg" alt=""></li>
<li><img src="07.jpg" alt=""></li>
<li><img src="08.jpg" alt=""></li>
<li><img src="09.jpg" alt=""></li>
</ul>
<!--[if gt IE 7]><!-->
</div>
</article>
<!--<![endif]-->
<!--[if lte IE 7]></td></tr></table><![endif]-->
要预加载所有图片,您应该使用javascript,这里有一个答案:Preloading images with jQuery