Javascript 使用jQuery进行背景图像转换
我编写了一个小jQuery代码来更改框中的背景图像 HTMLJavascript 使用jQuery进行背景图像转换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我编写了一个小jQuery代码来更改框中的背景图像 HTML <div class="content-wrapper" id="box"> <div class="content"> CONTENT </div> </div> CSS .content-wrapper{ display:table; width:100%; color:black; text-align:center
<div class="content-wrapper" id="box">
<div class="content">
CONTENT
</div>
</div>
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()是不可能的,因为在图像上我有固定的文本内容。我不想为背景滑块使用太大的库,所以我对最简单的解决方案感兴趣。非常感谢。如果您想左右滑动: 如果要上下滑动:
您可以尝试将这些因素结合起来,形成一个良好的过渡。那么您希望我们为您决定应该进行哪种过渡?这是一个视觉设计问题。文本覆盖图像的淡入淡出/淡出可以在文本和图像之间使用某种背景层,例如阴影、彩色矩形,确保足够的对比度和易读性,无论文本是什么,不管图片是什么。把你的代码粘贴到fiddleGood idea@ManProgrammer上很好。这是一个惊人的现象,但并不完全是我想要的。看。您可以更改整个DIV和内容。我需要在背景中制作一张幻灯片,作为某种效果或过渡。但这对我来说是一个很好的尝试的基础。谢谢
.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;
}
$(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);
});
}
});
$(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);
});
});
}
});