垂直/水平中心の流動的なスライド ショーを作成しようとしましたが、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;
}