スライス効果５■縦スライス効果のリンク付コメント付

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

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

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

</head>
<body>

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

<script type="text/javascript"><!--
/*===========================================================
縦スライス効果のリンク付コメント付スライドショー　★2017/09/17
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>私は共産主義者ではなかったから','http://www.google.com'];
ga[n++]=['soko26.jpg','社会民主主義者が牢獄に入れられたとき、私は声をあげなかった<br>私は社会民主主義ではなかったから','http://www.yahoo.com'];
ga[n++]=['soko27.jpg','彼らが労働組合員たちを攻撃したとき、私は声をあげなかった<br>私は労働組合員ではなかったから','http://www.fabulant.com'];
ga[n++]=['soko28.jpg','そして、彼らが私を攻撃したとき、私のために声をあげる者は、<br>誰一人残っていなかった',''];
ga[n++]=['soko29.jpg','『彼らが最初共産主義者を攻撃したとき』<br>by <span style="color:red;">マルティン・ニーメラー</span>',''];

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

var x_slices=10;   //number of lamellas.原本8。★画像をスライスする数
var pause=4000;   //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 width_slice;
var cliptop=0;
var clipbottom, clipleft, clipright;
var i_clipright=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)";
clipleft+=width_slice;
clipright=clipleft+i_clipright;
}}

function initiate() {
getcontent(); rp();
width_slice=Math.ceil(img_w/x_slices);
clipbottom=img_h;
$("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() {
clipleft=-width_slice;
clipright=0;
if (i_clipright<=width_slice) {rp_clip();i_clipright++; 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]+">";
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_clipright=0; clipleft=0; clipright=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/17

　スライス効果５■縦スライス効果のリンク付コメント付　　　　UP日時 : 2017/09/17
