*

画像を順番に表示する方法。画像のプリローダー。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

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

Message

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