目前我的网站主页上有幻灯片(4张图片)作为我的背景。图像之间的过渡非常平滑,并且从照片跳到照片。如何创建更平滑的过渡,是否可以淡入和淡出?
所有帮助非常感谢,谢谢
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
, 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
, 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
, 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
</script>
答案 0 :(得分:1)
将您的JS更改为此以提高效率。如果你想要淡入淡出动画,最好创建一个覆盖整个身体的div。:
<强> HTML 强>:
<body>
<div id="div1"></div>
</body>
<强> CSS 强>:
#div1
{
position:absolute;
top:0;
left:0;
bottom:0;
right: 0;
}
<强>的Javascript 强>:
$(document).ready(function(){
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
, 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
, 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
, 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
);
var current = 0;
function nextBackground() {
if(current<backgrounds.length)
current++;
else
current=0;
$('#div1').fadeOut(function() {
$('#div1').css({background : backgrounds[current]) });
$('#div1').fadeIn(5000);
}, 5000);
}
setInterval(nextBackground, 5000);
});
答案 1 :(得分:1)
由于没有不透明状态,很难淡化背景图像。您可以使用-z-index div与正文相同的大小,并在其余内容后面将图像淡入其中,或者您可以在背景上浮动蒙版并在切换时将其倾斜为黑色(或其他颜色)图片。这是执行后者的简单方法:
HTML:
<div id = "mask"></div>
CSS
#mask {
width:100%;
height:100%;
background:#000000;
top:0;
left:0;
position:absolute;
display:none;
}
jquery的
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
, 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
, 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
, 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
你可以使用颜色,定时器和不透明度来获得你想要的效果。