バナーdiv
を含むタグに含まれるバナーがあります。バナーを次の画像にフェードさせたいのですが、フェード効果を実現する方法がわかりません。jQuery fadeIn() を使用してみましたが、失敗しました。
を使用する必要があるのbackground: url()
は、ブラウザのサイズが変更されたときに、このバナー画像を快適にサイズ変更したいからです。これが私の問題に取り組む最善の方法であるかどうかはわかりません。
編集 - 私の現在のコードはバナーの画像を入れ替えますが、fadeIn() 効果を適用しません。コンソールはエラーを報告しません。
CSS:
header div#banner {
background: url(../image/banner/00.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
}
JavaScript:
var bannerImages = new Array();
var bannerCounter = 0;
function run() {
loadBannerImages();
runBannerTimer();
}
function loadBannerImages() {
var filePath = "image/banner/";
bannerImages[0] = filePath + "00.jpg";
bannerImages[1] = filePath + "01.jpg";
bannerImages[2] = filePath + "02.jpg";
bannerImages[3] = filePath + "03.jpg";
bannerImages[4] = filePath + "04.jpg";
}
function runBannerTimer() {
var t=setTimeout("swapBannerImage()",2000);
}
function swapBannerImage() {
$('#banner').fadeIn(1000, function() {
$('#banner').css('background', 'url(' + bannerImages[bannerCounter] + ') no-repeat center');
});
bannerCounter++;
if (bannerCounter >= bannerImages.length) {
bannerCounter = 0;
}
runBannerTimer();
}