我有一个脚本,可以在单个 div 中切换背景图片,我希望它能够淡入淡出;但是,我不想在其中间出现任何白色。我已经进行了几次搜索,但是它们都使用列表项而不是单个 div。我希望它只从一个背景图片过渡到下一个。这是我的当前脚本:
<script>
$(window).load(function() {
var i =0;
var images = ['http://www.example.com/images/homepage/slider-2.jpg','http://www.example.com/images/homepage/slider-3.jpg','http://www.example.com/images/homepage/slider-1.jpg'];
var image = $('#mainimage');
//Initial Background image setup
image.css('background-image', 'url(http://www.example.com/images/homepage/slider-1.jpg)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
这是我的当前CSS:
#mainimage {
background: url('http://www.example.com/images/homepage/slider-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:98.5%;
min-height: 400px;
border-bottom:15px solid #77951c;
}
HTML:
<div id="mainimage">
<div id="searchwrapper">
<div id="hometitlewrapper">
<h1>Cabins & Cottages <span>for Sale</span></h1>
</div>
<div id="searchboxwrapper">
<input id="state" class="autocomplete" type="search" placeholder="Search by Location" results />
</div>
</div>
这里有一个fiddle
该链接为fiddle页面。