● 横に画像をスライド(左)するのをヘッダーに配置します。
画像は左へスライドします。
① フリースペースまたは、フリープラグインへスライドショーしたい画像を設置する
<div class="chgHDR"><div class="chgHDR2"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><div class="chgHDR_d"></div></div></div>
◆ 説明
・ 画像は画像フォルダからアップロードしてください。
・ 画像のURLをコピーして、上記タグの画像のURLを入れ替えます。
・ 画像のURLのコピー方法は、CSSで使う画像は5枚しかアップロードできないの? を
参照してください。
・ width="1200" は画像の横幅を指定します。1200は調整してください。
画像フォルダからアップロードできる画像は横幅800pxまでなので、
800pxでアップロードされた画像を、width="1200"で拡大します。
尚、縮小も可能です。
すべて同じ値を指定してください。
・ 同じ幅、同じ高さの画像をスライドショーの画像に使うと簡単です。
・ 画像を追加したい場合は、下記の様に追加して行きます。(黄色の部分が追加した部分)
<div class="chgHDR"><div class="chgHDR2"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><img src="画像のURL" width="1200"><div class="chgHDR_d"></div></div></div>
② フリープラグインへスクリプトを追加します。(文字数制限対応)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
var left_x=0;var ani_time=3000;var cur_x=0;var scroll_x=1200;easing="swing";
window.onload = function(){chghdr();}
</script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
var left_x=0;var ani_time=3000;var cur_x=0;var scroll_x=1200;easing="swing";
window.onload = function(){chghdr();}
</script>
◆ 説明
・ var ani_time=3000; は横に1つの画像をスライドする時間です。
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 を使っている
場合は、1つにまとめる必要があります。
例 ・・・ aaaaaa() という関数が windows.onload と書かれていた場合。
window.onload = function(){chghdr(),aaaaaa();}
・ 下記はフリープラグインの先頭に1つあればOKです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
③ CSSへ下記CSSを入れます。
/* ------------------------------------------------------- */
/* ヘッダースライドショー(横スクロール) */
/* ------------------------------------------------------- */
.chgHDR{
width:1200px;/* 画像1枚の幅 */
height:300px;/* 画像の高さ */
z-index:100;
display:none;
}
.chgHDR2{
position:relative;
width:0px;
}
.skinHeaderArea{
width:1200px;/* 画像1枚の幅 */
}
/* ヘッダースライドショー(横スクロール) */
/* ------------------------------------------------------- */
.chgHDR{
width:1200px;/* 画像1枚の幅 */
height:300px;/* 画像の高さ */
z-index:100;
display:none;
}
.chgHDR2{
position:relative;
width:0px;
}
.skinHeaderArea{
width:1200px;/* 画像1枚の幅 */
}
◆ 説明
・ ページが表示されるときにフリースペースやフリープラグインに画像を表示させない
様に、表示しない(display:none;)設定にしています。
・ width:0; 部分は、スクリプト(プログラム)の中で計算するために 0px で指定して
います。
・ z-index:100; によって、.chgHDR の下の階層の .chgHDR2に指定の複数の画像を、
1枚しか表示させないように、重なりの優先順位を上げています。
④ ②の文字数制限対応を使いたくない場合は、フリープラグインは
下記の様になります。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chgHDR2 img:eq(0)").clone(true).insertAfter(".chgHDR_d");
$(".chgHDR_d").remove();
$(".chgHDR").appendTo(".skinHeaderArea");
var left_x=0;var ani_time=3000;var cur_x=0;var scroll_x=1200;easing="swing";
var chg_len=scroll_x*(list_len+1);
$(".chgHDR").css("display","block");
var chg_len=scroll_x*(list_len+1);
$(".chgHDR2").css("width",chg_len);
$(function(){
x_scroll();
function x_scroll(){
left_x-=scroll_x;
if(cur_x==list_len){
cur_x=0;left_x=0;
$(".chgHDR2").css("left","0px");
}else{cur_x++;}
$(".chgHDR2").animate({left:left_x+"px"},ani_time,easing,x_scroll);
}})})
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".chgHDR2 img:eq(0)").clone(true).insertAfter(".chgHDR_d");
$(".chgHDR_d").remove();
$(".chgHDR").appendTo(".skinHeaderArea");
var left_x=0;var ani_time=3000;var cur_x=0;var scroll_x=1200;easing="swing";
var chg_len=scroll_x*(list_len+1);
$(".chgHDR").css("display","block");
var chg_len=scroll_x*(list_len+1);
$(".chgHDR2").css("width",chg_len);
$(function(){
x_scroll();
function x_scroll(){
left_x-=scroll_x;
if(cur_x==list_len){
cur_x=0;left_x=0;
$(".chgHDR2").css("left","0px");
}else{cur_x++;}
$(".chgHDR2").animate({left:left_x+"px"},ani_time,easing,x_scroll);
}})})
</script>
⑤ スクリプトの説明
A $(document).ready でページのHTMLがすべてブラウザに
読まれてからスクリプトが動くようにしています。
画像をを指定している①のフリースペースがスクリプトより
後ろにあると指定した画像のHTML読むことができないためです。
B 最初の画像をクローン化(複製)して画像の一番最後に追加します。
これで、最初と最後の画像が一緒の画像になります。
(1番目、2番目・・・・1番目)
C このスライドショー自体をヘッダーに移動します。
移動したら、スライドショーを表示させます。
画像の件数-1 を行って画像の件数を求めます。
(Bで画像を複製したので、マイナス1します)
画像の全体の長さを求めます。(複製した画像の長さも含めます)
(画像の全体の長さ=(画像件数+1)×画像1枚の長さ)
D 画像スライドショーの関数を実行します。(x_scroll();)
($(function(){ は処理を遅らせて、クローン(複製)の処理を
完了を待たせるためにつけています)
E 以下は関数部分(x_scroll();)
現在の水平位置から画像1枚の横幅を引きます。
現在の表示画像の番号(何番目)と最後の画像番号が等しければ、
最初の状態(1番目)に位置を戻します。
jQuery の animate(アニメーション)を使って、画像1枚分を
横にずらします。(ani_timeの指定時間でずらします)
ずらすのが完了したら、再度、画像スライドショーの関数を実行します。
(x_scroll();)