スライドショー③

★　スライドショー③

●　横スライドショー（クリック型）

　　①　クリックするとクリックした方向に移動します。
　　　　但し、一番右から右に移動させた場合は、先頭の画像に戻ります。

　　②　自動的にスライドも可能です。

　　③　ヘッダー、記事、サイドバー、メッセージボードなどに設置できます。
　　　　ヘッダー、サイドバーの場合は、画像はフリースペースまたはフリープラグインに
　　　　画像のＨＴＭＬ部分を指定します。

　　④　記事やメッセージボードに入れる場合は、ＨＴＭＬタグモードにして、
　　　　ＨＴＭＬタグモードのままで投稿します。
　　　　（アメブロの標準エディタの不具合のため、改行などがついてしまうため）
　　　　（新エディタでなく、標準エディタで画像のＨＴＭＬを追加すること
　　　　・・・新エディタはバグがあるので）

また、記事を変更する場合も　<br />　が入ったりするので、メモ帳などに
貼り付けるＨＴＭＬをバックアップすると良いと思います

　　⑤　使った矢印画像

　　・　左矢印
http://stat001.ameba.jp/user_images/20120507/19/new-blue-777/67/a7/p/o0024004311960400707.png
　　

　　・　右矢印
http://stat001.ameba.jp/user_images/20120507/19/new-blue-777/b2/c7/p/o0024004311960400708.png
　　

●　例は下記を参照
http://ameblo.jp/new-blue-777/entry-11242847271.html

●　設置方法

　◆　フリープラグインに追加する

①　自動的にスライドしない場合

　■　説明（以下同じ）

　　　・　220px 及び -220px ・・・・　１クリックで移動する横幅
　　　・　2000 ・・・１クリックで移動する横幅にかかる時間　2000 は 2秒
　　　・　swing ・・・　easing での　移動パターン
　　　・　1320 ・・・　移動pxの最大値（例　１画像の幅×(画像数-1))
　　　　　　220px × (7画像-1)=220px × 6 = 1320
　　　・　下記はフリープラグインに１つあればＯＫ
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

★　バグを変更

黄色の部分を変更。

②　自動的にスライドする場合

　　■　説明

　　　・　3000 ・・・　setInterval　の時間　3000 は 3秒（ 3秒後とに１画像移動）

◆　記事やメッセージボードやフリースペースやフリープラグインに追加する

①　画像をクリックしたらポップアップする方法
　　（私のブログの記事のポップアッププラグインが必要）

　　■　説明

　　　　・　220px ・・・　画像の横幅
　　　　・　画像のＵＲＬ・・・　同じ幅、同じ高さの画像を使うとよい。

②　画像をクリックしたらポップアップしない方法

　◆　ＣＳＳの設定

①　下記をＣＳＳへ追記する

/* ------------------------------------------------------- */
/* スライドショー（クリック方式）　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.slide11{/* スライドショーの画面表示領域 */
width:220px;/* 幅 */
height:165px;/* 高さ */
z-index:100;/* 優先度 */
overflow:hidden;/* 画面表示領域以外は表示しない */
}
.slide12{/* スライドショー画像の明細部分 */
position:relative;/* 相対配置 (スライドさせるため) */
left:0px;/* 最初の表示位置 */
width:1760px;/* スライドショー画像全体の横の長さ（画像数×画像の横幅) */
}
.skinArticleBody .slide12 img {/* スライドショー画像の明細部分のマーシンをなくす */
margin:0px;
}
.slide1{/* 矢印部分を配置する隙間 */
width:220px;
padding:0 30px;/* 左右に 30pxの隙間 */
}
.slide_lp{/* 左矢印 */
position:relative;/* 相対配置 */
top:110px;/* 上 */
left:-33px;/* 左 */
outline:hidden;/* アウトラインを表示しない */
}
.slide_rp{/* 右矢印 */
position:relative;/* 相対配置 */
top:110px;/* 上 */
left:185px;/* 左 */
outline:hidden;/* アウトラインを表示しない */
}
/* ------------------------------------------------------- */

◆　ヘッダーに設置したい場合は、下記をフリープラグインへ入れる

◆　スライドショーの画面表示領域　や　１クリックによる移動距離を
　　変えることによって、いろいろな表示が可能です。

●　http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css の
　　この記事のスクリプトの内容

function slidex(r_len,slc,ani_t,es,max_l){// 移動関数
// 移動の長さ,移動のセレクタ,アニメーション時間,easing,最大の長さ(１画像分は引く)
var next_left=cur_left+r_len;// 移動後の位置
if((r_len>0)&&(next_left>0)){next_left=0;}
if(Math.abs(next_left)>max_l){next_left=0;}
$(slc).stop().animate({left:next_left+"px"},ani_t,es,cmp_left(slc,next_left,ani_t));// アニメーション
cur_left=next_left;
}
function cmp_left(slc,next_left,ani_t){
setInterval( "cmp_left2(slc,next_left)", ani_t )
}
function cmp_left2(slc,next_left){
$(slc).css("left",next_left+"px");
}

$(document).ready(function(){
if($(".slide_lp").length>0){
$(".slide_l").appendTo(".slide_lp");
$(".slide_r").appendTo(".slide_rp");
}else{$(".slide_l").remove();$(".slide_r").remove();}
});

function slidex(r_len,slc,ani_t,es,max_l){// 移動関数
// 移動の長さ,移動のセレクタ,アニメーション時間,easing,最大の長さ(１画像分は引く)
if($(slc).length!=0){
var slc1=slc;
var next_left=cur_left+r_len;// 移動後の位置
if((r_len>0)&&(next_left>0)){next_left=0;}
if(Math.abs(next_left)>max_l){next_left=0;}
// $(slc).stop().animate({left:next_left+"px"},ani_t,es);
$(slc).stop().animate({left:next_left+"px"},ani_t,es,cmp_left(slc1,next_left,ani_t));
cur_left=next_left;
}
}

function cmp_left(slc1,next_left,ani_t){
if($(slc1).length!=0){
var slc2=slc1;
// setInterval( "\'cmp_left2('\'+slc2+\'',next_left)\'", ani_t );
}
}
function cmp_left2(slc3,next_left){
if($(slc3).length!=0){
$(slc3).css("left",next_left+"px");
}
}

★　追記①　２０１２．０５．０９

　●　記事にスライドショーを設置して、中央に配置したい場合は、
　　下記をＣＳＳへ追記する

.slide1{/* スライドショー */
margin:auto;/* 位置を自動中央寄せ */
}

●　枠をつけたい場合は下記をＣＳへ追記する

.slide11{
border:10px solid #aaaaaa;
}

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

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

スライドショー③