[英]Image Carousel with Fade to Black Transition
我需要制作一个带有黑色渐变效果的旋转木马,甚至最好是一些深灰色,例如#2B303A
。 我在网上找到了这段代码,效果很好,唯一的问题是,淡入淡出效果是我不喜欢的非常亮的白色,并且困扰着眼睛。
如何使它们在图像之间淡化为黑色?
$(document).ready(function() { //Carousel var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"]; var len = vet_url.length; var i = 0; function swapBackgrounds() { $("#background").animate({ opacity: 0 }, 700, function() { $($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({ opacity: 1 }, 700); }); i++; } setInterval(swapBackgrounds, 10000); });
#background { background-color: #2B303A; position: absolute; z-index: 1; min-height: 100%; min-width: 100%; background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="background"></div>
至少在测试用例中,您需要在html元素上执行此操作。
html
{
background-color:#2B303A;
}
将不透明度设置为0,可以看到轮播下的元素,在这种情况下,除了物体本身,什么都没有。 未设置主体的background-color
,因此它是默认的白色。 将background-color
设置为黑色可以解决此问题。
jQuery的.animate不能与背景色一起使用,尽管它可以与以下背景一起使用: https : //github.com/jquery/jquery-color
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.