■ - hansolostar1810の日記

練習スライド
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jquery easyslider</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:1200,
	auto:true,
	continuous:true
  });
});
</script>
<style type="text/css">
<!--
#slider ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#slider li{
	width:300px;
	height:300px;
	}

-->
</style>
</head>
<body>
<a href="http://cssglobe.com/post/5780 /easy-slider-17-numeric-
navigation-jquery-slider">easy slider 1.7-numeric navigation jquery
slider</a>
<div id="slider">
<ul>
<li><img src="images/01.jpg" width="300" height="300" alt=""></li>
<li><img src="images/02.jpg" width="300" height="300" alt=""></li>
<li><img src="images/03.jpg" width="300" height="300" alt=""></li>
<li><img src="images/04.jpg" width="300" height="300" alt=""></li>
</ul>
</body>
</html>

その２

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
/*表示修飾*/
* {
  font-family: 
    Verdana, Geneva, sans-serif;
  margin:0; 
  padding: 0;
}
body {
  margin: 0; 
  text-shadow:1px 1px 2px #f0f0f0;
}
h1 {
  font-size: 28px;
  margin: 15px 0 0 0;
}
.nav {
  background: #000; 
  padding: 5px 5px 5px 300px; 
}
.nav li {
  display: inline-block;
}
.nav li, .nav li a {
  color: #fff;
}
.content {
  margin: 0 0 0 30px;
}
.black {
  background: #000; 
  color: #fff;
}
.content ul {
  width: 400px; 
  margin: 0 0 0 30px;
}
.content li {
  margin: 0 0 0.6em 0;
}
/*ページ設定*/
body{
	width: 6400px; /* =ページ幅×ページ数 */
	position:absolute;
	top:0px;
	left:0px; 
	bottom:0px;
}
.page { 
	margin:0px;
	bottom:0px;
	width: 1600px; /* =ページ幅 */
	float: left;
	height: 100%;
}
-->
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
	function scrollTo(to) {
		$('html, body')
				.stop()
				.animate({
					scrollLeft: $(to).offset().left
				}, 500, 'linear');
	}
	$('.pager').bind('click',function(ev){
		scrollTo($(this).attr('href'));
	});
	$('html').mousewheel(function(ev, mov) {
		if ($('html, body').is(':animated')) {
			return false;
		}
		var page = document.location.hash || '#page1';
		var target = null;
		if (mov > 0) {
			target = $(page).prev('.page').attr('id');
		} else if (mov < 0) {
			target = $(page).next('.page').attr('id');
		}
		if (target) {
			scrollTo('#'+target);
			document.location.hash = '#'+target;
		}
		ev.preventDefault(); // 縦スクロールはさせない
    });
});
</script>
</head>
<body>
<div id="container">
<!-- 1ページ目 -->
<div class="page" id="page1">
<ul class="nav">
<li>Page1</li>
<li><a href="#page2" class="pager">Page2</a></li>
<li><a href="#page3" class="pager">Page3</a></li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>
<div class="content">
<h1>Page1</h1>

</div>
</div>
<!-- 2ページ目 -->
<div class="page" id="page2">
<ul class="nav">
<li><a href="#page1" class="pager">Page1</a></li>
<li>Page2</li>
<li><a href="#page3" class="pager">Page3</a></li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>
<div class="content">
<h1>Page2</h1>

</div>

</div>
<!-- 3ページ目 -->
<div class="page" id="page3">
<ul class="nav">
<li><a href="#page1" class="pager">Page1</a></li>
<li><a href="#page2" class="pager">Page2</a></li>
<li>Page3</li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>
<div class="content">
<h1>Page3</h1>

</div>
</div>
<!-- 4ページ目 -->
<div class="page" id="page4">
<ul class="nav">
<li><a href="#page1" class="pager">Page1</a></li>
<li><a href="#page2" class="pager">Page2</a></li>
<li><a href="#page3" class="pager">Page3</a></li>
<li>Page4</li>
</ul>
<div class="content">
<h1>Page4</h1>

</div>
</div>
</div>
<!-- /#container -->
</body>
</html>
（感想）
ほぼ出来たものをコピーしただけですが
すごく時間がかかりました。