jQuery クロスフェード

授業

jQuery クロスフェード　表示画像をふわーっと切り替えていく魔法のようなもの

http://latte.moto-chika.com/0107/lightbox/index4.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery クロスフェード</title>
 <script src="js/jquery-1.8.3.min.js"></script>
 <script src="js/jquery.cross-slide.min.js"></script>
 <script>
$(function(){
	$('#slideshow').crossSlide({
		sleep:3,
		fade:2
	},[
	{src:'photos/fukei1.jpg'},
	{src:'photos/fukei2.jpg'},
	{src:'photos/fukei3.jpg'},
	{src:'photos/fukei4.jpg'},
	{src:'photos/fukei5.jpg'}
	])
});
</script>
<style>
body{
	text-align:center;
	}
#slideshow{
	width:400px;
	height:300px;
	margin:100px auto 0 auto;
}
</style>
</head>
<body>
<div id="slideshow"></div>

</body>
</html>

jQuery クロスフェード　上下の動きで表示画像を切り替えていく

http://latte.moto-chika.com/0107/lightbox/index5.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery クロスフェード</title>
 <script src="js/jquery-1.8.3.min.js"></script>
 <script src="js/jquery.cross-slide.min.js"></script>
 <script>
$(function(){
	$('#slideshow').crossSlide({
		speed:45,
		fade:1,
		loop:1
	},[
	{src:'photos/fukei1.jpg', dir:'up'},
	{src:'photos/fukei2.jpg', dir:'down'},
	{src:'photos/fukei3.jpg', dir:'up'},
	{src:'photos/fukei4.jpg', dir:'down'},
	{src:'photos/fukei5.jpg', dir:'up'}
	])
});
</script>
<style>
body{
	text-align:center;
	}
#slideshow{
	width:400px;
	height:200px;
	margin:100px auto 0 auto;
}
</style>
</head>
<body>
<div id="slideshow"></div>

</body>
</html>