HTML、CSS、JavaScript、および JQuery を使用して、Web サイト用の単純な Web ページを作成しようとしています。私が欲しいのは、ページの上部にいくつかの画像のスライドショーを表示することです。ユーザーがブラウザを閉じるまで、写真が次々とフェードアウトしてフェードインするようにしたいだけです。各画像を一定時間表示した後、フェードアウトし、別の画像がフェードインします。
thisとthis post on SOを参照しましたが、解決策が見つかりませんでした。このページからアイデアを得て、いくつかのコードを開発しようとしました。
Web サイトの全体的なレイアウトは次のとおりです。
このため、私のindex.htmlページは次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css" />
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/common.js"></script>
<script language="javascript" src="js/banner_rotator.js"></script>
</head>
<body onload="loadBody();">
<div id="wrapper">
<img id="headerlogo" />
<div id="nav">
<a href="javascript: void(0);">Home</a>
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Weddings</a>
<a href="javascript: void(0);">Portraiture</a>
<a href="javascript: void(0);">Landscapes</a>
<a href="javascript: void(0);">Products</a>
<a href="javascript: void(0);">Miscellaneous</a>
<a href="javascript: void(0);">Services</a>
<a href="javascript: void(0);">Contact</a>
</div>
<div id="container">
<div id="content">
<!-- Main content starts here -->
<p>
Welcome to the world of The Siblings' photography.
</p>
imgpos = <span id="imgposspan"></span>
<!-- Main content ends here -->
</div>
</div>
</div>
</body>
</html>
CSS は次のようになります。
body {
background-color: transparent; color: #d0d0d0;
font: normal normal 11px verdana; margin: 0 auto;
}
#wrapper {
background-color: transparent; width: 960px; margin: 0 auto;
}
#headerlogo {
border-radius: 0px 0px 5px 5px; display: block;
width: 960px; height: 350px;
background-color: #d0d0d0;
}
#container {
width: 100%; margin-top: -35px;
}
#nav {
background-color: transparent;
color: #888888; border-radius: 5px; padding: 10px;
width: 100%; position: relative; top: -40px;
}
#nav>a {
border-radius: 5px; display: inline-block; padding: 5px 19px;
font-weight: bold; border: 1px solid transparent;
color: #888888; background: none none transparent no-repeat;
}
#nav>a:link {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:visited {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:hover{
text-decoration: none; border-color: #ffa500; background-image: url("/img/1x30_ffa500.gif");
background-repeat: repeat-x; box-shadow: 0px 0px 5px #ffd700;
}
#nav>a:active {
text-decoration: underline; border-color: transparent;
background-image: none;
}
#content {
background-color: #f0f0f0; color: #202020;
padding: 5px; border-radius: 5px;
}
ファイルは次のcommon.jsようになります。
$(document).ready(function (){
var images = new Array();
images[0] = new Image();
images[0].src = "img/coverpics/sea_link.jpg";
images[1] = new Image();
images[1].src = "img/coverpics/marine_drive.jpg";
images[2] = new Image();
images[2].src = "img/coverpics/backbay.jpg"
banner_rotator("headerlogo", images, 0);
});
そして、banner_rotator.jsファイルは次のようになります。
function banner_rotator(imgid, imgarray, imgpos) {
setInterval(function() {
if (imgpos >= imgarray.length || imgpos == undefined)
imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
// $("#imgposspan").html(imgpos);
imgpos++;
}, 8000);
}
さて、私の問題の説明は次のとおりです。
最初の数秒間、上部は空白です。ローカルマシン自体にすべてのファイルを開発して持っているにもかかわらず、画像は表示されません。
この最初の画像は、フェードインするのではなく、画面に直接ポップアップします。
このイメージがフェードアウトした後、イメージ ブロックは、まるで
display: none;1 秒間設定されているかのように消えます。画像に続くページ全体が上にシフトします。次に、次の画像がフェードインし、すべてが正常に実行されます。
したがって、要するに、このスライドショーの開始に問題があります。誰でも助けてもらえますか？
また、ここにいる全員がアクセスして実行方法を確認できるように、コードをどこに置くことができるか教えてください。