スライス効果２■縦スライス効果のみ

●2017/09/03：即時関数で囲んで、グローバル変数を消しました。
画像が縦にスライスされながら、次の画像に切り替わるスライドショーのJavaScriptです。
私はこの動作を「スライス効果」と名付けましたが、原本では「lamellar effect（薄板効果）」と、なっています。
原本をいろいろ改造しました。
見本は原本と同じ縦方向のスライスで、コメントとリンクは削除しました。

原本は、現在では使用してはならないとされる「eval関数」を使用していて、コメント付きリンク付きです。
原本は、こちらから。
原本に記述してある「http://www.fabulant.com」というサイトでは、残念ながら原本をみることはできなくなっています。

2017/09/04：開始時の最終画像指定の「要・不要」をJavaScriptではなく、CSSで指定に変更。動作安定と背景透過画像使用時に変化を付けられるため。

<!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"><!--
body{background:#acf;}/*★背景色水色。不要なら削除*/

#wakuS{   /*★スライド領域指定*/
width:700px;/*★必須。スライド画像の横幅*/
height:350px;/*★必須。スライド画像の縦幅*/
margin:50px auto;/*★位置指定。左右中央。お好みで*/
background:url(kusa14.jpg);/*■注意!!スライドの最終画像を指定■ただし、白地から開始したり背景透過画像使用の時はこの行は削除*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

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

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

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["kusa11.jpg","kusa12.jpg","kusa13.jpg","kusa14.jpg"]; 

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

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

// END OF SCRIPT-CONFIGURATION 指定ここまで-------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var ii=0,n=ga.length;ii<n; ii++){load[ii]=new Image();load[ii].src=myurl+ga[ii];}
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="";

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

function rp_clip(){
for (i=0;i<=x_slices;i++) {
var thissimg=$("s"+i).style;
thissimg.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 ABcss=Acss+Bcss, ACcss=Acss+Ccss;

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>";
setTimeout(changepicture,pause)
}}

function getcontent() { contentimg="<img src="+myurl+ga[p]+" style='"+Bcss+"'>";}

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>";}
sss +="</div>";
$("wakuS").innerHTML=sss;
initiate();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

スライス効果２■縦スライス効果のみ 最終修正日 : 2017/09/04

　スライス効果２■縦スライス効果のみ　　　　最終修正日 : 2017/09/04