我制作了一个jQuery代码,用于更改框中的背景图片。
HTML
<div class="content-wrapper" id="box">
<div class="content">
CONTENT
</div>
</div>
JQUERY
slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide);
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
setInterval(function() {
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
slide++; if(slide>6) slide=1;
}, 6000
);
CSS
.content-wrapper{
display:table;
width:100%;
color:black;
text-align:center;
margin:0 0 0 0 !important;
padding:0px !important;
height:600px;
}
.content-wrapper > .content{
width:100%;
display: table-cell;
vertical-align:middle;
text-align:center;
font-size:36px;
font-weight:bold;
}
#box {
background-repeat: no-repeat;
background-position:center top;
background-attachment:fixed;
background-size:cover;
}
#box > .content{
background:rgba(0,0,0,0.5);
color:#FFF;
}
我的想法是每次加载页面时显示随机图片并开始每隔6秒更换图像的幻灯片。所有这一切都很好,但我不知道如何做一个很好的过渡。 fadeIn()或fadeOut()是不可能的,因为在图像上我有固定的文本内容。我不想为背景滑块使用太大的库,所以我对最简单的解决方案感兴趣。非常感谢你。
答案 0 :(得分:3)
所以如果你想左右滑动Fiddle:Demo:
$(document).ready(function () {
var delay = 3000,
fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i % len]).hide("slide", function(){
$(banners[++i % len]).show("slide", {
direction: "left"
});
setTimeout(cycle, delay);
});
}
});
如果您想上下滑动:Fiddle
$(document).ready(function() {
var delay = 3000, fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i%len]).slideUp(fade, function() {
$(banners[++i%len]).slideDown(fade, function() {
setTimeout(cycle, delay);
});
});
}
});
你可以尝试将它们结合起来,以实现一个很好的过渡。