スライス効果５-１■横スライス効果のリンク付コメント付

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スライス効果５-１■横スライス効果のリンク付コメント付</title>

<!--★コピーここから -->
<style type="text/css"><!--

#wakuS{   /*★スライド領域指定*/
width:500px;/*★必須。スライド画像の横幅*/
height:400px;/*★必須。スライド画像の縦幅*/
margin:50px auto;/*★位置指定。左右中央。お好みで*/
background:url(soko29.jpg);/*■注意!!スライドの最終画像を指定■ただし、白地から開始したり背景透過画像使用の時はこの行は削除*/
}

.mesB {   /*★コメント領域指定*/
height:200px;/*★コメント領域の表示縦幅。横幅はjavascriptで指定済み*/
line-height:30px;/*★コメントが１行なら行間をコメント領域の縦幅と同じ指定にすると、文字の上下の中央位置指定になる。お好みで*/
text-align:center;/*★コメントの左右中央位置指定。お好みで*/
font-size:18px;
color:#fff;/*★必須。リンクが付いてない場合のコメントの文字色。a.mesFと同じ文字色で*/
text-shadow:1px 1px 1px #f00;/*★文字の影。お好みで*/
}

a.mesF {   /*★コメント文字指定。コメントはリンク付きなので、ここで指定*/
color:#fff;/*★必須。コメント文字色　白色*/
text-decoration:none;/*★リンクの下線を非表示*/
}

--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行は画像位置指定。id="wakuS"は必須-->
<div id="wakuS"></div>

<script type="text/javascript"><!--
/*===========================================================
横スライス効果のリンク付コメント付スライドショー　★2017/09/18
Slideshow with with lamellar effect（by Peter Gehrig）サイト： http://www.fabulant.com
Copyright (c) 2010 Peter Gehrig. All rights reserved.
============================================================*/
(function (){  var n=0, p=0, i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントとリンクのの同時指定。増減可能。['画像','コメント','リンク先']; の３個をこの順番で記述。
//リンク無しの時は「''」で。コメントにタグも使用可
var ga=new Array(); 
ga[n++]=['soko25.jpg','戦争を望まない国民を<br> 政治指導者が望むようにするのは簡単です。<br> 国民に向かって、我々は攻撃されかかっているのだと煽り<br>平和主義者にしては愛国心が欠けていると<br>非難すればよいのです。<br> （ヘルマン・ゲーリング） ','http://www.google.com'];

ga[n++]=['soko26.jpg','偽りを述べる者が愛国者とたたえられ<br>真実を語る者が売国奴と罵られた世の中を<br>私は経験してきた<br>（三笠宮さまのお言葉）','http://www.yahoo.com'];

ga[n++]=['soko27.jpg','不思議なことだ<br>いつの時代においても悪人は自分の下劣な行為に<br>宗教や道徳や愛国心のために奉仕したのだという<br>仮面を着せようとつとめている<br>（ハイネ）','http://www.fabulant.com'];

ga[n++]=['soko28.jpg','<p style="margin-top:100px;">愛国心は、ならず者達の最後の隠れ家である<br>（サミュエル・ジョンソン）</p>',''];

ga[n++]=['soko29.jpg','Jアラートのクソっぷりでインチキがバレバレだな<br>東京や東海道新幹線は止めない。飛行機は止めない<br> 過疎地の鉄道だけ止める<br>何で飛行機動いてるの<br>ミサイルなら空飛んでる飛行機が一番ヤバいじゃん<br>（Twitterより）',''];

var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var x_slices=8;    //number of lamellas.原本8。★画像をスライスする数
var pause=8000;    //pause beween the pictures (seconds)★画像切替速度原本2秒。1000=1秒
var s_spd=30;      //★スライス切替効果の時間。原本20。小さいほど速い
//target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")★原本は"_blank"。リンクのターゲット指定
var target_url="_new";

// END OF SCRIPT-CONFIGURATION 指定ここまで-------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var ii=0;ii<n; ii++){load[ii]=new Image();load[ii].src=myurl+ga[ii][0];}
var img_w=wakuS.clientWidth;    //width of slideshow (pixels)■画像横幅
var img_h=wakuS.clientHeight;   //height of slideshow (pixels)■画像縦幅
var height_slice;
var clipleft=0;
var clipright, cliptop, clipbottom;
var i_clipbottom=1;
var contentimg="";
var contentmes="";

function rp(){
for (i=0;i<=x_slices;i++) {
var img=$("s"+i), mes=$("t"+i);
img.innerHTML=contentimg; img.style.left=0; img.style.top=0;
mes.innerHTML=contentmes; mes.style.left=0; mes.style.top=0;
}}

function rp_clip(){
for (i=0;i<=x_slices;i++) {
var thissimg=$("s"+i).style;
var thissmes=$("t"+i).style;
thissimg.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)";
thissmes.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)";
cliptop+=height_slice;
clipbottom=cliptop+i_clipbottom;
}}

function initiate() {
getcontent(); rp();
height_slice=Math.ceil(img_h/x_slices);
clipright=img_w;
$("whole").style.left=0;
$("whole").style.top=0;
p++; openlamellar();
}

var Acss="position:absolute;";
var Bcss="width:"+img_w+"px; height:"+img_h+"px;";
var Ccss="top:0;left:0;";
var Dcss="bottom:0;left:0;";
var ABcss=Acss+Bcss, ACcss=Acss+Ccss, ADcss=Acss+Dcss;

function openlamellar() {
cliptop=-height_slice;
clipbottom=0;
if (i_clipbottom<=height_slice) {rp_clip();i_clipbottom++; var timer=setTimeout(openlamellar,s_spd);}
else {
clearTimeout(timer);
$("whole").innerHTML="<div style='"+ACcss+"'>"+contentimg+"</div><div style='"+ACcss+"'>"+contentmes+"</div>";
setTimeout(changepicture,pause)
}}

function getcontent() {　/*■リンク無しの分も追加*/
contentimg="<img src="+myurl+ga[p][0]+" style='"+Bcss+"'>";
contentmes=(ga[p][2]!="")?"<div style='"+Bcss+"'><div class='mesB' style='"+ADcss+" width:"+img_w+"px;'><a class='mesF' href='"+ga[p][2]+"' target='"+target_url+"'>"+ga[p][1]+"</a></div></div>":"<div style='"+Bcss+"'><div class='mesB' style='"+ADcss+" width:"+img_w+"px;'>"+ga[p][1]+"</div></div>";
}

function changepicture() {
i_clipbottom=0; cliptop=0; clipbottom=0;
rp_clip();
if (p>n-1) {p=0}
getcontent(); rp(); p++; openlamellar();
}

var sss="<div style='position:relative; overflow:hidden; "+Bcss+"'><div id='whole' style='"+Bcss+"'></div>";
for (i=0;i<=x_slices;i++){ sss +="<div id='s"+i+"' style='"+ABcss+"'></div><div id='t"+i+"' style='"+ABcss+"'></div>";}
sss +="</div>";
$("wakuS").innerHTML=sss;
initiate();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
スライス効果５-１■横スライス効果のリンク付コメント付 UP日時 : 2017/09/18

　スライス効果５-１■横スライス効果のリンク付コメント付　　　　UP日時 : 2017/09/18
