白色背景()
问题描述:
目前我使用这个代码在我的主页,创建幻灯片:白色背景()
var images = [
"/d/assets/images/IT/homepage/slider-1.jpg",
"/d/assets/images/IT/homepage/slider-2.jpg",
"/d/assets/images/IT/homepage/slider-3.jpg",
"/d/assets/images/IT/homepage/slider-4.jpg",
"/d/assets/images/IT/homepage/slider-5.jpg",
];
var imageHead = document.getElementById("slider-home");
var i = 0;
setInterval(function() {
$('#slider-home').fadeOut(200,
function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
$('#slider-home').fadeIn(200)
}
);
}, 5000);
代码工作完美,更改背景图像中,每隔5秒。不幸的是,每一次改变之间都有一个小小的白色背景,过渡似乎并不像Ryanair主页上的幻灯片那样“干净”和“流畅”:https://www.ryanair.com/it/it/
问题产生的原因在哪里,我怎么解决它?
答
试试这个例子 https://codepen.io/dudleystorey/pen/ehKpi
无需编写JS了点。 但通过CSS它是可能的。
CSS:
animation: 30s slidy infinite;
集财产 “的动画:30岁slidy无限;” (更改滑块中图像的秒数。)
答
您正在淡出一个图像,等待该过渡完成,然后淡入下一个图像。这实际上是转换到图像之间的页面背景。
通过堆叠两个元素并在它们之间转换来同时实现这些转换将有所帮助,但它仍然不完美:在转换过程中您仍然可以看到背景,而两个图像都是部分透明的。
相反,得到的平稳过渡,只是淡出“顶”图像中的堆栈,揭示其背后的一个:
yourswap = function() {
if ($('#div1').is(':visible')) {
fadeout = "#div1";
fadein = "#div2";
} else {
fadeout = "#div2";
fadein = "#div1";
}
// fade one out, then fade the other in
$(fadeout).fadeOut(function() {
$(fadein).fadeIn()
});
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}
goodswap = function() {
$('#div1').fadeIn(0); // make sure the background element is visible
$('#div2').fadeToggle(); // transitions the top element in and out
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container {
position: relative
}
#div1 {
background-color: red;
}
#div2 {
background-color: brown;
display: none;
}
#div3 {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="yourswap()">Your transition</button>
<button onclick="badswap()">Simultaneous transition</button>
<button onclick="goodswap()">Single transition</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>
当两个图片有一个背景出现阿尔法低于1.你应该有两个图像在彼此之上,并且不应该在第二个图像完全出现之前隐藏第一个图像。 – the4kman
您正在淡出某个元素,切换背景,然后将其淡入。闪光发生在淡出和淡入之前。要在瑞安网站上获得淡入淡出效果重叠你需要有2个元素,一个具有当前背景,另一个具有下一个背景,淡入淡出另一个。你可以使用jquery动画的'queue:false'选项来启用两个动画立即运行。 –