ホームページの背景画像を黒フェードスライドショーにするBBgSD_0001_os [オープン][ScriptData]

<style type="text/css">

html, body, div, dd {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
}

body {
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: 'メイリオ';
	text-align: center;
}

div.title {
	max-width: 100%;
	text-align: center;
	font-weight: bold;
	background-color: #578;
	padding: 10px 20px;
	color: #fff;
	line-height: 1.5em;
}

div.main {
	text-align: center;
	width: 90%;
	max-width: 700px;
	text-align: center;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.8);
}

dt.bun {
	text-align: left;
	font-weight: bold;
	background-color: #ddd;
	padding: 10px 0px 10px 20px;
}

dd.bun {
	text-align: left;
	line-height: 1.5em;
	margin-top: 10px;
	padding: 0px 20px;
}

.but_sl {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 20;
	width: 60px;
	height: 30px;
	cursor: pointer;
	opacity: 0.1;
	transition-duration: 0.3s;
}

.but_sl:hover {
	opacity: 1;
}

</style>

<script language="JavaScript">

"use strict";window.addEventListener("load",function(){var n=0,photo=[];

//--- 書き換える部分↓ ---

photo[n++]="../img30/0.jpg";
	photo[n++]="../img30/1.jpg";
	photo[n++]="../img30/2.jpg";
	photo[n++]="../img30/3.jpg";
	photo[n++]="../img30/4.jpg";
	photo[n++]="../img30/5.jpg";
	photo[n++]="../img30/6.jpg";
	photo[n++]="../img30/7.jpg";
	photo[n++]="../img30/8.jpg";
	photo[n++]="../img30/9.jpg";
	photo[n++]="../img30/10.jpg";
	photo[n++]="../img30/11.jpg";

//-- 書き換える部分↑ --

//-- 設定部分↓ --

var	ke = 10000,		//--スライドショーの速度（ミリ秒単位）
	ya = 1500,		//--アニメーション時間（ミリ秒単位）。

//-- 設定部分↑ --

Copyright=	"Miyake_kobo",
  HomePage=	"http://miyake.g2.xrea.com/",
  MailAddress=	"miyake_kobo@yahoo.co.jp",
  ContentType=	"背景画像のスライドショー",

o=document.body,c=Copyright,u=HomePage,a=MailAddress,ct=ContentType,i=0,T,iy=n,C={iy:iy,ya:ya,ke:ke},p_obj=[],d=document.createElement("a"),y=!0,bu=document.querySelector(".but_sl"),td=function(sel,v){sel.style.WebkitTransitionDuration=v+"ms";sel.style.transitionDuration=v+"ms"},nx=function(){clearTimeout(T);i++;i%=C[a.substr(1,2)];sl()},sl=function(){td(o,C[u.substr(9,2)]*0.25);o.style.backgroundColor='rgba(0,0,0,1)';setTimeout(function(){o.style.backgroundImage='url('+p_obj[i].src+')';td(o,C[u.substr(9,2)]*0.75);o.style.backgroundColor='rgba(0,0,0,0)'},C[c.substr(2,2)]*0.25);setTimeout(function(){if(y)go()},C[c.substr(2,2)])},go=function(){clearTimeout(T);T=setTimeout(nx,C[u.substr(11,2)])};for(var t=0;t<iy;t++){p_obj[t]=new Image();p_obj[t].src=photo[t]};if(bu){if(y){bu.innerHTML="pause"}else{bu.innerHTML="play"} bu.onclick=function(){if(y){clearTimeout(T);y=!1;this.innerHTML="play"}else{y=!0;this.innerHTML="pause";nx()}}};if(!document.querySelector(".c_"+c)){document.body.appendChild(d);d.setAttribute("href",u);d.setAttribute("class","c_"+c);d.innerHTML=ct+" Ref (C) "+c;d.style.display="none";d.style.margin="1ex";d.style.fontSize="small"} o.style.backgroundImage='url('+photo[0]+')';o.style.backgroundColor='rgba(0,0,0,0)';o.style.backgroundBlendMode='darken';o.style.backgroundPosition='50% 50%';o.style.backgroundSize='cover';o.style.transitionProperty='background-color,background-size';if(y)go()},!1)

ホームページの背景画像を黒フェードスライドショーにするBBgSD_0001_os [オープン][ScriptData]

・　説明: 　ホームページの背景画像のスライドショーです。 BODY要素の背景を直接操作しています。 BODYと同サイズで複数のDIV要素を挿入して入れ替えるタイプではありません。ただし、CSS3への対応が遅れているブラウザでは、背景画像がアニメーション無しで切り替わるスライドショーになります。「書き換える部分」の photo[n++]="～.jpg"; に画像のアドレス（相対表記でも絶対表記でも可）を書いてください。; 　パソコンでは画面の左上隅にマウスを移動すると操作ボタンが現れ、離すと消えます。モバイルでは左上隅をタップすると現れ、別の場所をタップすると消えます。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。なお、使用している画像は生成AIのGeminiで作った地球の画像と私が撮影した写真を合成したものです。; 　このページは文字コード「UTF-8」で書いています。他の文字コードで書かれたページにサンプルソースを貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

⇔

・　ページ全体のソース: 　以下のソースコード全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」し、ご自身の画像データに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.