上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 超簡易のスクリプトを使用したスライドショー・スクリプトのひな形です。
 ボタンをクリックすれば、どんどん画像が切り替わる単純なもの。画像タグだけではなく、HTMLタグやテキストを入れ込むこともできます
 作者にはろくなスクリプトの知識はないので、あまりスクリプト自体は参考にしない方が良いと思います。作者のメモ的記事です。
 ちなみに、スライドショーの内容は検索エンジンにヒットしない、Javaスクリプト内に完全に納めてしまったタイプです。広告などを配置する場合に最適です。検索対策をするなら、「外部ファイル化」は必須です。CSS見本もCSSファイルの方へ記述して、自由にスタイリングしてください。
 かすかに丸角です。




見本





フォーマット


<div id="slrlbutton"></div>
<script type="text/javascript">
(function(){
var d=new Array();
//●以下の配列に、HTMLを記述していきます。
d[0]='<b>test1</b>';
d[1]='<s>test2</s>';
d[2]='<a>test3</a>';
d[3]='<i>test4<i>';
d[4]='<b style="color:red">test5</b>';

//●配列数は自由に増減できます。
document.getElementById("slrlbutton").innerHTML='<div class="sllrbutton"><div class="slbutton-outer"><div class="slbutton-inner"></div><div id="slslideprev" class="slslidebutton"><</div><div class="slbutton-inner"></div></div><div class="slbutton-outer"><div class="slbutton-inner"></div><div id="slslidenext" class="slslidebutton">></div><div class="slbutton-inner"></div></div><br clear="all" /></div><div id="slslidescreen"></div>';
var pre=document.getElementById("slslideprev");
var nex=document.getElementById("slslidenext");
var sc=document.getElementById("slslidescreen");
var i=0;var j=0;
sc.innerHTML=d[0];
var imag= function(){
	i=i+j;
	if (i<0){i=d.length-1} else if (i>=d.length){i=0}
	sc.innerHTML=d[i];
	};
pre.onclick = function(){
	j=-1;
	imag();
	};
nex.onclick = function(){
	j=1;
	imag();
	};
pre.onmouseover = function(){
	this.style.backgroundColor ="#eeeeee";
	};
pre.onmouseout = function(){
	this.style.backgroundColor ="#ffffff";
	};
nex.onmouseover = function(){
	this.style.backgroundColor ="#eeeeee";
	};
nex.onmouseout = function(){
	this.style.backgroundColor ="#ffffff";
	};
}
)();
</script>
<style>
.sllrbutton{
	margin:10px;
	line-height:1;
	}
#slslidescreen{
	clear:both;
	border:1px dotted #222;
	padding:10px;
	}
.slslidebutton{
	padding:2px 5px;
	margin:0;
	border-left:1px solid #888;
	border-right:1px solid #888;
	background:#fff;
	color:#888;
	font-size:12px;
	font-weight:bold;
	cursor:pointer;
	}
.slbutton-outer{
	float:left;
	margin:1px;
	}
.slbutton-inner{
	font-size:1px;
	height:1px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	background:#888;
}
</style>


■「d[連番] = '~~';」を好きな枚数分追加できる。
■「'~~'」に画像用タグをそのまま入れられる。長さも自由。テキストもOK。

*FC2記事ページで使う場合は、記事を保存するときに、最後の設定部分(日付とか、公開か非公開かなどの)の「改行の扱い」を「HTMLタグのみ」にしておかないと正常に動作しません。


 メニューページはこちらから。
簡易スクリプトひな形集
このエントリーをはてなブックマークに追加
Tue.07.13.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。