这个有点晚了,但我会试一试。
假设所有图像的高度不同:这是一个小技巧,即使使用不同尺寸的图像,也可以始终保持容器大小相同。
伪术语:
- 使您的图像成为幻灯片的“背景”,而不是放置在其中。
- 在 CSS 中添加 {background-size:cover}。
- 使用 Cycle2 的自定义模板来启动它。(黑客?嗯,不是真的)
让我们得到一些新的 CSS 规则:
.cycle-overlay {
position:absolute;
bottom:auto;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
background:#333;
padding:0;
opacity:1
}
.banner-background {
width:100%;
height:100%;
background-position:center;
background-size:cover;
position:absolute;
top:0;
left:0;
z-index:10;
}
.cycle-slideshow {
width:100%;
max-height:400px;
background-position:center;
background-size:cover;
color:#fff;
overflow:hidden;
}
的HTML
<div class="cycle-slideshow"
data-cycle-slides='li'
data-cycle-fx='scrollHorz'
data-cycle-speed='700'
data-cycle-timeout='7000'
data-cycle-overlay-template="<div class=banner-background style=background-image:url(http://domain.tld/images/{{background}})></div>"
>
<ul>
<li data-cycle-background="slide1.jpg"></li>
<li data-cycle-background="slide2.jpg"></li>
<li data-cycle-background="slide3.jpg"></li>
</ul>
<div class="cycle-overlay"></div>
</div>
JS
$('.cycle-slideshow').on('cycle-before', function (opts) {
var slideshow = $(this);
var img = slideshow.find('.banner-background').css('background-image');
slideshow.css('background-image', img);
});
假设你所有的图像都是相同的高度:几个月前我写了一个关于将 animate.css 与Cycle2集成的示例
这不是您要查找的内容,但该示例提供了全角自动高度解决方案。
查看代码,您将获得所需的内容。
在这里拉小提琴!
另外,请记住,使用Cycle2
您需要将额外的插件添加到幻灯片中心jquery.cycle2.center.js
希望这会有所帮助,干杯!