我希望背景图像交叉渐变或交叉溶解,而不是纯粹的淡入和淡出。我看了很多教程,他们都涉及使用img
标记,而我使用background-image
css属性设置背景。
$(window).load(function() {
storeOpen();
var i = 0;
var images = ['http://ascendspa.com/wellness/wp-content/uploads/2014/07/Vayo-Massage.jpg?w=261&h=196&crop=1', 'http://massagehaveneagan.webstarts.com/uploads/massage.jpg'];
var image = $('#bg-image');
//Initial Background image setup
image.css('background-image', 'url(http://massagehaveneagan.webstarts.com/uploads/massage.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);
});
HTML
<div>
<div class="container">
<div class="row">
<div id="bg-image"></div>
<div class="col-sm-7 col-lg-7 main">
<h1>Get A Massage Today!</h1>
</div>
<div class="col-sm-5 col-lg-5 main1 order">
<h2>Make an Appointment Today!</h2>
<button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Haircut <span class="caret"> </span></button>
<button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Massage <span class="caret"> </span></button>
<button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Healing <span class="caret"> </span></button>
<p class=hometext>Get the pampering you deserve. We offer haircuts, massages, and more.</p>
</div>
</div>
</div>
</div>
CSS
#bg-image {
background: url(images/home2.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
margin-top: 0px;
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}