垂直/水平居中的流体幻灯片

时间:2013-01-06 17:11:05

标签: slideshow center vertical-alignment fluid-layout alignment

我尝试制作垂直/水平居中的流畅幻灯片,但似乎是这样,幻灯片放映不是在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;
}

1 个答案:

答案 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