面白１０■シャッフルするスライドショー

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

/*★#Shuffleは必須。スライド表示位置とサイズ指定だがwidthもheightも画像より大きくする*/
#Shuffle{
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:20px auto;/*★上下、左右位置指定*/
width:400px;/*★画像実寸横幅280pxより大きく*/
height:450px;/*★画像実寸縦幅350pxより大きく*/
}

/*★下記はスライド画像の枠線装飾。お好みで。不要なら削除*/
#Shuffle img{
border: solid 2px #fff;/*★枠指定。白色*/
border-radius:20px;/*★角丸指定*/
box-shadow: 5px 5px 5px #333;/*★影指定*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<p style="text-align:center; color:red;">画像マウスオンで停止します。</p>

<!--★透過gifを使わず、空間を開けます。とりあえずwidthもheightも画像より大きくします。大きさは水平移動と垂直移動の数値で変化するので、下に書いた文章が重ならないよう調節して下さい。id="Shuffle"を必ず記述-->
<div id="Shuffle"></div>

<script type="text/javascript"><!--
/*======================================================
シャッフルするスライドショー (c) Ger Versluis 2003
JS保管サイトhttp://www2.tky.3web.ne.jp/~ogura1/ (サイト消滅)
★透過gifの代わりに<div></div>で、空間作成。即時関数へ修正　2020/05/26
=========================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var w=280;　　　//★画像横幅
var h=350;　　　//★画像縦幅
var xStep=6;    //★水平移動　原本5　数値を大きくすると速くなる。0にはしないこと
var yStep=2;    //★垂直移動　原本4　数値を大きくすると速くなる。0にはしないこと　
var spd=40;     //★速度。原本50。数値が小さいほど速い

//★画像指定とリンク先指定。例として1番目と2番目の画像にリンク指定有り。しない時は"",と記入。
var ga=[
	"gt3.jpg","http://www.yahoo.co.jp",
	"gt4.jpg","http://www.google.co.jp",
	"gt5.jpg","",
	"gt1.jpg","",
	"pt59.jpg",""　　　/*★最終行には,(カンマ)を付けない*/　　　
];

/*============= DO NOT EDIT BELOW ★指定ここまで======================*/
var S_Stppd=false;
var e,i,S_TpI,S_BI,S_TI,S_CrImg=4,S_Drctn=1,S_Top=.01,S_Left=.01;
var S_Pre_Img=new Array(ga.length);
for(i=0;i<ga.length;i++){S_Pre_Img[i]=new Image();S_Pre_Img[i].src=ga[i]}

function Shuffle(){
e=document.getElementById("Shuffle");
S_TpI=document.createElement("img");e.appendChild(S_TpI);	
S_BI=document.createElement("img");e.appendChild(S_BI);
S_TpI.style.position=S_BI.style.position="absolute";
S_TpI.style.height=h+"px";
S_BI.style.height=h+"px";
S_TpI.style.width=w+"px";
S_BI.style.width=w+"px";
S_TpI.style.left=0;
S_BI.style.left=0;
S_TpI.style.top=0;
S_BI.style.top=0;

S_TpI.style.zIndex=1;
S_BI.style.zIndex=0;
S_TpI.src=ga[0];
S_TpI.lnk=ga[1];
S_BI.src=ga[2];
S_BI.lnk=ga[3];
S_TpI.onclick=S_BI.onclick=S_LdLnk;
S_TpI.onmouseover=S_BI.onmouseover=S_Stp;
S_TpI.onmouseout=S_BI.onmouseout=S_Rstrt;
ShufImages();
}

function ShufImages(){
if(!S_Stppd){		
	if(S_Top>=h||S_Left>=w){
	S_Drctn=-1;
	S_TpI.style.zIndex=0;
	S_BI.style.zIndex=1}
	if(S_Top==0||S_Left==0){
	S_Drctn=1;
	S_TpI.style.top=0;		
	S_TpI.style.left=0;		
	if(S_CrImg==ga.length)S_CrImg=0;
	S_TpI.src=ga[S_CrImg];
	S_TpI.lnk=ga[S_CrImg+1];
	S_TI=S_TpI;
	S_TpI=S_BI;
	S_BI=S_TI;
	S_TpI.style.zIndex=1;
	S_BI.style.zIndex=0;
	S_CrImg+=2}

	S_Top+=Math.round(yStep*S_Drctn);//★垂直移動
	S_Left+=Math.round(xStep*S_Drctn);//★水平移動
	if(S_Top<0||S_Left<0)S_Top=S_Left=0;
	S_TpI.style.top=S_Top+"px";		
	S_TpI.style.left=S_Left+"px";}
setTimeout(ShufImages,spd)}

function S_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function S_Stp(){S_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function S_Rstrt(){S_Stppd=false}
Shuffle();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
面白１０■シャッフルするスライドショー 最終修正日 : 2020/05/26

　面白１０■シャッフルするスライドショー　　　　最終修正日 : 2020/05/26
