スライドアニメーションによる画面要素の切替

ページA

いろはにほへとちりぬる
をわかよたれそつねならむ

ページB

うゐのおくやまけふこえてあさきゆめみしゑひもせす

ページC

山のあなたの空遠く幸い住むと人のいう。

ページD

ああ、われひとゝ尋（と）めゆきて、涙さしぐみ、かへりきぬ。
山のあなたになほ遠く

ダウンロード

SlideK.js

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<link href="/note_prg/css/jquery-ui.min.css" rel="stylesheet">
	<script src="/note_prg/js/jquery-1.11.1.min.js"></script>
	<script src="/note_prg/js/jquery-ui.min.js"></script>
	<script src="SlideK.js"></script>
	
	<script>
	var slideK;
	$(function(){
		slideK = new SlideK();
	});
	</script>

</head>
<body>

	<div class="sec4">
		<input type="button" class="btn btn-success" value="戻りスライド" onclick="slideK.rotationPrev()" />
		<input type="button" class="btn btn-success" value="次へスライド" onclick="slideK.rotationNext()" />
	</div>

	<div id="s1" class="slide_k" >
		<h3>ページA</h3>
		いろはにほへとちりぬる<br>
		をわかよたれそつねならむ<br>
	</div>

	<div id="s2" class="slide_k">
		<h3>ページB</h3>
		うゐのおくやまけふこえてあさきゆめみしゑひもせす
		<br>
		
	</div>

	<div id="s3" class="slide_k">
		<h3>ページC</h3>
		山のあなたの空遠く
		幸い住むと人のいう。
		<br>
		
	</div>

	<div id="s4" class="slide_k">
		<h3>ページD</h3>
		ああ、われひとゝ尋（と）めゆきて、
		涙さしぐみ、かへりきぬ。<br>
		山のあなたになほ遠く
		<br>
		
	</div>

</body>
</html>