*

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

公開日: : html5, jquery, 未分類

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。

ページ表示後に画像があるとそのまま表示されてしまいます。
そのまま表示するのでは、面白くないと思い今回調べてみたらこんなものがありましたので、
書きました。

設置方法は、非常に簡単で、

の中にコンテンツを書くだけ。

まずは、デモを用意しましたので、見てください。
デモ01

今回は、サイトマップとして使用してみましたが、
用途は、自由です。色々試してみてください。

以下にソースを記載します。

今回使用するスタイルシートは、
index.css
以上の1を使用します。

scriptは、
custom.js
以上の1つです。

scriptは、htmlに直接書いてもいいのですが、
今回は、別ファイルにしました。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像を順番に表示する方法。</title>
<meta charset="UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
<div class="imgBox">
            <ul>
               <li><a href="index.html">Home<br /><img src="images/sitemap/Home.png" alt="Home" /></a></li>
               <li><a href="index.html">Custom<br /><img src="images/sitemap/custom.png" alt="custom" /></a></li>
               <li><a href="index.html">AccessMap<br /><img src="images/sitemap/Maps.png" alt="Maps" /></a></li>
            </ul>
            <ul>
               <li><a href="index.html">Companyprof<br /><img src="images/sitemap/profile.png" alt="profile" /></a></li>
               <li><a href="index.html">Contact<br /><img src="images/sitemap/Mail.png" alt="Mail" /></a></li>
               <li><a href="index.html">Blog<br /><img src="images/sitemap/Blog.png" alt="Blog" /></a></li>
            </ul>
            <ul>
               <li><a href="index.html">Sitemap<br /><img src="images/sitemap/Sitemap.png" alt="Sitemap" /></a></li>
            </ul>
</div><!--imgBox-->
</div><!--wrapper-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type='text/javascript' src='js/custom.js'></script> 

</body>
</html>

このように

で囲ってあげれば大丈夫です。

次に、スタイルシートです。
index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	color: #000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size: 16px;
	background-repeat: repeat-x;
	width: 100%;
	background-color: #696969;
	min-width: 1200px;

}
#wrapper{
	width:1000px;
	margin:0 auto;
	position:relative;
	z-index:0;
	color:#ffffff;
}
#wrapper ul {
        list-style:none;
        margin:0;
        padding:0;
}
#wrapper li {
        width:200px;
	height: 100px;
	padding: 20px 0px;
        text-align: center;
        margin:0;
        padding:0;
	float: left;
}

/*指定なしリンクここから*/
a:link {
	color: #ffffff;
	text-decoration: none;
	border:none;
}
a:visited {
	text-decoration: none;
	color: #ffffff;
	border:none;
}
a:hover {
	text-decoration: underline;
	color: #ffffff;
	border:none;
}
a:active {
	text-decoration: none;
	color: #ffffff;
	border:none;
}
a {
	font-size: 16px;
}

a img{
	border:none;
}


/*画像ローディング*/
.imgBox{}

今回のcssは、画像を表示する枠とリンクの部分だけ記載していますので、
画像を順番に表示するだけだとcssを使用しなくても大丈夫です。

最後にjsファイルです。
custom.js

//イメージリロードここから
$(function () {
     $('.imgBox img').hide();//ページ上の画像を隠す
});

var i = 0;
var int=0;
$(window).bind("load", function() {//ページコンテンツのロードが完了後、機能させる
     var int = setInterval("doThis(i)",500);//フェードするスピード
});

function doThis() {
     var images = $('img').length;//画像の数を数える
     if (i >= images) {// ループ
          clearInterval(int);//最後の画像までいくとループ終了
    }
    $('img:hidden').eq(0).fadeIn(500);//一つずつ表示する
    i++;
}

このファイルで、画像の表示スピードなどを設定します。

以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
少しのコードで実装可能な20のjQuery小技集

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード


関連記事

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です