スライス効果３-１■横スライス効果のリンク付

●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"><!--

#wakuS{   /*★スライド領域指定*/
width:280px;/*★必須。スライド画像の横幅*/
height:350px;/*★必須。スライド画像の縦幅*/
margin:50px auto;/*★位置指定。左右中央。お好みで*/
box-shadow: 5px 5px 5px #888;/*★影指定。お好みで*/
border:solid 10px #ddd;/*★枠線指定。お好みで*/
background:url(gt6.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 n=0, p=0, i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントとリンクのの同時指定。増減可能。["画像","リンク先"]; の２個をこの順番で記述。リンク無しの時は「""」で。
var ga=new Array(); 
ga[n++]=["gt1.jpg","http://www.google.com"];
ga[n++]=["gt2.jpg","http://www.yahoo.com"];
ga[n++]=["gt3.jpg","http://www.fabulant.com"];
ga[n++]=["gt4.jpg","http://oekakirenn.webcrow.jp/index.html"];
ga[n++]=["gt5.jpg",""];
ga[n++]=["gt6.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=40;          //★スライス切替効果の時間。原本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;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="";

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)";
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 ABcss=Acss+Bcss, ACcss=Acss+Ccss;

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

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

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

</body>
</html>

スライス効果３-１■横スライス効果のリンク付 最終修正日 : 2017/09/04

　スライス効果３-１■横スライス効果のリンク付　　　　最終修正日 : 2017/09/04