ホームページ作成必須知識

Jquery サンプル集

各種オススメソフト

リンク

アクセスカウンター

Jquery & JavaScript サンプル集

スライドショー 画像をシャッフル

  • サンプル写真
  • サンプル写真
  • サンプル写真
  • サンプル写真
  • サンプル写真

使用スクリプト

このスライドショー(画像シャッフル)で使っているスクリプトは以下の3 つ。まずは、このスクリプトを入手しておこう。下のDownload ボタンを押すと全部まとめてダウンロードできるよ。

  • jquery.js
  • jquery.cycle.all.js
  • shuffle.js
使用しているスクリプトを一括ダウンロード >> Download

 

スライドショーに使用する画像を準備

スライドショーに使つかう画像を準備する。特に「こうじゃないとダメ~!」ってことはないんだけど、スライドの見栄えをよくするのにいくつかコツ伝授しとこう。

  1. 画像のサイズは縦横とも合わせておくと綺麗に見える
  2. 表示させる画面にあった画像サイズにする(よくばって大きくすると読み込みに時間がかかる)

んじゃ、さっそく設置してみよ~!

HTMLへの記述方法

まずはスクリプトの読み込みの設定をしよう。HTMLの<head>~</head>タグの間に以下のように、JavaScript を読み込むための記述をする。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="shuffle.js"></script>

次に、各画像へのリンクを張る。

下の例では 5枚の画像を使う場合。もっとたくさんの画像を使いたい場合は、任意で増やしてね。

<ul class="sample">
<li><img src="./img/img_01.jpg" /></li>
<li><img src="./img/img_02.jpg" /></li>
<li><img src="./img/img_03.jpg" /></li>
<li><img src="./img/img_04.jpg" /></li>
<li><img src="./img/img_05.jpg" /></li>
</ul>

上のデモの場合は、スタイルシートを使って、見栄えを調整している。ちなみにこのページのデモの場合は下のようなスタイルを適用している。

.sample{
width:auto;
height:300px;
padding:0;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 80px;
}
.sample img{ ... 画像に枠をつけるなどの装飾をしている
top:0;
left:0;
background:#fff;
padding:10px;
border:1px solid #999;
}

 

追記の情報

  1. JSファイルと画像ファイルはそれぞれフォルダを作って入れておくなど整理しておくと、後で修正や画像の追加などを行う際に混乱を避けられる。
  2. ちなみに、シャッフルする画像にそれぞれリンクを設定することも可能だよ。
ページトップへ