-2
背景から背景までのjQuery背景フェーダーが必要です。jQueryコードを変更して背景画像をフェードするCSSのみ
私は外出する基地を持っていますが、成功しませんでした。
私はすべての適切なライブラリを含んでいます、私はトリプルチェックしました。あなたがに/フェードアウトしたい場合は<img>
要素を使用する必要が
//Array of images which you want to show: Use path you want.
var images = new Array('img/bg_0.jpg', 'img/bg_1.jpg', 'img/bg_2.jpg');
var nextimage = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.face')
.css('background-image', 'url("' + images[nextimage++] + '")')
.fadeIn(500, function() {
setTimeout(doSlideshow, 1000);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="face" style="background-image: url('img/bg_5.jpg');" class="face">
<div class="face-body">
<div class="container text-center">
<h1 class="face-title one">
<?php echo SRV_NAME; ?>
</h1>
<h2 class="face-subtitle">
<?php echo SRV_SLOGAN; ?>
</h2>
</div>
</div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
:
は、以下のスニペットを見てください。あなたのコードで '.fadeIn()'は '.face'要素全体に影響を与えます...子要素(内側のdiv、h1とh2)を含みます。通常の ''要素を使用して、 'position:absolute'と' z-index'を探してください。 –
sooo私は何を提案していますか?私はjQuery自体、特にこの状況では、多くの経験を持っていません –