ヘッダースライドショー①（横スライド(左)）

★　ヘッダースライドショー①（横スライド(左)）

●　横に画像をスライド(左)するのをヘッダーに配置します。
　　画像は左へスライドします。

①　フリースペースまたは、フリープラグインへスライドショーしたい画像を設置する

　◆　説明

　　・　画像は画像フォルダからアップロードしてください。

　　・　画像のＵＲＬをコピーして、上記タグの画像のＵＲＬを入れ替えます。

　　・　画像のＵＲＬのコピー方法は、ＣＳＳで使う画像は５枚しかアップロードできないの？を
　　　　参照してください。

　　・　width="1200" は画像の横幅を指定します。1200は調整してください。
　　　　画像フォルダからアップロードできる画像は横幅800pxまでなので、
　　　　800pxでアップロードされた画像を、width="1200"で拡大します。
　　　　尚、縮小も可能です。
　　　　すべて同じ値を指定してください。

　　・　同じ幅、同じ高さの画像をスライドショーの画像に使うと簡単です。

　　・　画像を追加したい場合は、下記の様に追加して行きます。（黄色の部分が追加した部分）

<div class="chgHDR"><div class="chgHDR2"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><img src="画像のＵＲＬ" width="1200"><div class="chgHDR_d"></div></div></div>

②　フリープラグインへスクリプトを追加します。（文字数制限対応）

　◆　説明

　　・　var ani_time=3000;　は横に１つの画像をスライドする時間です。
　　　　3000 は　3秒を意味します。

　　・　var scroll_x=1200; は画像の横幅を指定します。

　　・　easing="swing"; は、jQueryの easing の　swing を利用することを意味します。
　　　swing と　linear の指定が可能です。
　　　他のものを使いたい場合は、　easingのプラグインのスクリプトを別途指定する
　　　必要があります。

　　　easingについては下記を参照
　　　http://semooh.jp/jquery/cont/doc/easing/

　　・　window.onload = function(){chghdr();}　は、他にもwindow.onload を使っている
　　　場合は、１つにまとめる必要があります。

　　例　・・・　aaaaaa() という関数が windows.onload と書かれていた場合。

　　　　window.onload = function(){chghdr(),aaaaaa();}

　　・　下記はフリープラグインの先頭に１つあればＯＫです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

③　ＣＳＳへ下記ＣＳＳを入れます。

/* ------------------------------------------------------- */
/* ヘッダースライドショー（横スクロール）　　　　　　　　　*/
/* ------------------------------------------------------- */
.chgHDR{
width:1200px;/* 画像１枚の幅 */
height:300px;/* 画像の高さ */
z-index:100;
display:none;
}
.chgHDR2{
position:relative;
width:0px;
}
.skinHeaderArea{
width:1200px;/* 画像１枚の幅 */
}

◆　説明

・　ページが表示されるときにフリースペースやフリープラグインに画像を表示させない
　様に、表示しない(display:none;）設定にしています。

・　width:0;　部分は、スクリプト（プログラム）の中で計算するために　0px で指定して
　います。

・　z-index:100; によって、.chgHDR　の下の階層の　.chgHDR2に指定の複数の画像を、
　１枚しか表示させないように、重なりの優先順位を上げています。

④　②の文字数制限対応を使いたくない場合は、フリープラグインは
　　下記の様になります。

⑤　スクリプトの説明

Ａ　$(document).ready　でページのＨＴＭＬがすべてブラウザに
　　読まれてからスクリプトが動くようにしています。
　　画像をを指定している①のフリースペースがスクリプトより
　　後ろにあると指定した画像のＨＴＭＬ読むことができないためです。

Ｂ　最初の画像をクローン化（複製）して画像の一番最後に追加します。
　　これで、最初と最後の画像が一緒の画像になります。
　　（１番目、２番目・・・・１番目）

Ｃ　このスライドショー自体をヘッダーに移動します。
　　移動したら、スライドショーを表示させます。
　　画像の件数－１　を行って画像の件数を求めます。
　　（Ｂで画像を複製したので、マイナス１します）
　　画像の全体の長さを求めます。（複製した画像の長さも含めます）
　　（画像の全体の長さ＝（画像件数＋１）×画像１枚の長さ）

Ｄ　画像スライドショーの関数を実行します。（x_scroll();）
　　（$(function(){　は処理を遅らせて、クローン（複製）の処理を
　　完了を待たせるためにつけています）

Ｅ　以下は関数部分（x_scroll();）
　　現在の水平位置から画像１枚の横幅を引きます。
　　現在の表示画像の番号（何番目）と最後の画像番号が等しければ、
　　最初の状態（１番目）に位置を戻します。

　　jQuery　の　animate（アニメーション）を使って、画像１枚分を
　　横にずらします。（ani_timeの指定時間でずらします）

　　ずらすのが完了したら、再度、画像スライドショーの関数を実行します。
　　（x_scroll();）
　　

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

ヘッダースライドショー①（横スライド(左)）