jQuery-横スライド

授業

jQuery-横スライド

easySlider


実物はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery EasySlider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="easySlider1.7.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script>
$(function(){
	$('#slider').easySlider({
		controlsShow:false,
		speed:1200,
		auto:true,
		continuous:true
	});
});
</script>
<style type="text/css">
body {
	width: 600px;
	margin: 20px auto;
	background-image: url(images/wood.png);
}
#slider ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#slider li {
	width: 600px;
	height: 400px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/01.jpg"></li>
<li><img src="images/02.jpg"></li>
<li><img src="images/03.jpg"></li>
<li><img src="images/04.jpg"></li>
<li><img src="images/05.jpg"></li>
<li><img src="images/06.jpg"></li>
</ul>	
</div>
</body>
</html>
横スライド: ホイール対応


実物はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横スライド:ホイール対応</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
/*表示修飾*/
* {
	margin: 0;
	padding: 0;
        font-family:  "ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"メイリオ", Meiryo, 
	Osaka,
	"ＭＳ Ｐゴシック", "MS PGothic", 
	sans-serif;
}
body {
	margin: 0;
	text-shadow: 1px 1px 2px #f0f0f0;
	background: #333;
}
h1 {
	color: #fff;
	font-size: 22px;
	margin: 15px 0 0 0;
}
.nav {
	background: #666;
	padding: 5px 5px 5px 300px;
}
.nav li {
	display: inline-block;
}
.nav li, .nav li a {
	color: #fff;
}
.content {
	width: 600px;
	margin: 30px auto;
}
.content li {
	margin: 0 0 0.6em 0;
}
/*ページ設定*/
body {
	width: 8000px;/* =ページ幅×ページ数 */
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.page {
	margin: 0;
	bottom: 0;
	width: 1600px;/* =ページ幅 */
	float: left;
	height: 100%;
}
</style>
<script src="jquery.js"></script>
<script src="jquery.mousewheel.js"></script>
<script>
$(function(){
	function scrollTo(to){
		$('html, body')
		.stop()
		.animate({
			scrollLeft: $(to).offset().left
		}, 1000, '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>1.青空と花</li>
  <li><a href="#page2" class="pager">2.ひまわり畑</a></li>
  <li><a href="#page3" class="pager">3.プール</a></li>
  <li><a href="#page4" class="pager">4.金魚</a></li>
  <li><a href="#page5" class="pager">5.花火</a></li>
  </ul>
  <div class="content">
  <h1>青空と花</h1>
  <figure><img src="images/01.jpg" width="600" height="400" alt="青空と花"></figure>
  </div>
  </div>
  <!--2ページ目-->
  <div class="page" id="page2">
  <ul class="nav">
  <li><a href="#page1" class="pager">1.青空と花</a></li>
  <li>2.ひまわり畑</li>
  <li><a href="#page3" class="pager">3.プール</a></li>
  <li><a href="#page4" class="pager">4.金魚</a></li>
  <li><a href="#page5" class="pager">5.花火</a></li>
  </ul>
  <div class="content">
  <h1>ひまわり畑</h1>
  <figure><img src="images/02.jpg" width="600" height="400" alt="ひまわり畑"></figure>
  </div>
  </div>
  <!--3ページ目-->
  <div class="page" id="page3">
  <ul class="nav">
  <li><a href="#page1" class="pager">1.青空と花</a></li>
  <li><a href="#page2" class="pager">2.ひまわり畑</a></li>
  <li>3.プール</li>
  <li><a href="#page4" class="pager">4.金魚</a></li>
  <li><a href="#page5" class="pager">5.花火</a></li>
  </ul>
  <div class="content">
  <h1>プール</h1>
  <figure><img src="images/03.jpg" width="600" height="400" alt="プール"></figure>
  </div>
  </div>
  <!--4ページ目-->
  <div class="page" id="page4">
  <ul class="nav">
  <li><a href="#page1" class="pager">1.青空と花</a></li>
  <li><a href="#page2" class="pager">2.ひまわり畑</a></li>
  <li><a href="#page3" class="pager">3.プール</a></li>
  <li>4.金魚</li>
  <li><a href="#page5" class="pager">5.花火</a></li>
  </ul>
  <div class="content">
  <h1>金魚</h1>
  <figure><img src="images/04.jpg" width="600" height="400" alt="金魚"></figure>
  </div>
  </div>
  <!--5ページ目-->
  <div class="page" id="page5">
  <ul class="nav">
  <li><a href="#page1" class="pager">1.青空と花</a></li>
  <li><a href="#page2" class="pager">2.ひまわり畑</a></li>
  <li><a href="#page3" class="pager">3.プール</a></li>
  <li><a href="#page4" class="pager">4.金魚</a></li>
  <li>5.花火</li>
  </ul>
  <div class="content">
  <h1>花火</h1>
  <figure><img src="images/05.jpg" width="600" height="400" alt="花火"></figure>
  </div>
  </div>
  </div>
  <!--/#container-->

</body>
</html>


アシュラの公式サイトでもjquery.mousewheel.jsが使われていて、ホイールで横スライドします。