横スライド：ホイール対応

FadeChange

素材
横スライド

サンプルデモ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/*表示修飾*/
* {
  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 src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(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>
スクロール・スワイプに対応
ナビゲーションリンクで減速スライド