jQuery製ばらばらに切り替わるApple風スライダー

Demo & Download

一応ie6とかでも動きます。

柔軟性はあまりないですがプラグイン化してみました。

jquery.appleslider.js

必要なプラグイン

クールな動きを実現するために「jquery.easing.js」を使用しています。
以下からダウンロードしてください。

jQuery Easing v1.3

使い方

こんな感じでマークアップします。
リストの数だけボタンを作成してください。
「id=arrow」という画像はボタンを追尾する画像です。

html

	<div id="slider">
		<div id="thum">
			<ul>
				<li><img src="img/01.png" width="128" height="128" /></li>
				<li><img src="img/02.png" width="128" height="128" /></li>
				<li><img src="img/03.png" width="128" height="128" /></li>
				<li><img src="img/04.png" width="128" height="128" /></li>
			</ul>
			<ul>
				<li><img src="img/05.png" width="128" height="128" /></li>
				<li><img src="img/06.png" width="128" height="128" /></li>
				<li><img src="img/07.png" width="128" height="128" /></li>
			</ul>
			....
		</div>
		<ul id="btn">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Gallery</a></li>
			<li><a href="#">Link</a></li>
		</ul>
		<img src="img/arrow.png" width="13" height="8" id="arrow" />
	</div>
	

css3を使用していますがこんなかんじにすると、それっぽくなります。

css

	#slider {
		position: relative;
		overflow: hidden;
		background: #fff;
		width: 800px;
		margin: 0 auto 15px;
		text-align: center;
		padding: 20px 0px 0;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-box-shadow: 1px 1px 4px #A6A8AA;
		-moz-box-shadow: 1px 1px 4px #A6A8AA;
	}
	#slider ul {
		list-style: none;
	}
	#slider ul li {
		display: inline;
	}
	#slider #btn {
		padding: 7px 0;
		border-top: solid 1px #C9C9C9;
		border-bottom: solid 1px #EBEBEB;
		background: #DFDFDF;
		background: -moz-linear-gradient(top, #D8D8D8,
			#F2F2F2 5%,
			#F0F0F0 50%,
			#DFDFDF);
		background: -webkit-gradient(linear, left top, left bottom,
			from(#D8D8D8),
			color-stop(0.05, #F2F2F2),
			color-stop(0.5, #F0F0F0),
			to(#DFDFDF));
	}
	#slider #btn li {
		padding: 0 15px;
	}
	#slider #btn li a {
		text-decoration: none;
		color: #999;
	}
	#slider #btn li a:hover {
		color: #333;
	}
	#slider #btn li.active a {
		color: #333;
		text-shadow: 1px 1px 0px #fff;
	}
	#slider #thum {
		position:relative;
		height: 160px;
	}
	#slider #thum ul {
		position: absolute;
		top: 10px;
		left: 0;
	}
	#slider #thum ul li {
		position: absolute;
	}
	#slider #arrow {
		position: absolute;
		top: 180px;
		left: 345px;
	}
	

数値はある程度変更できますが、「position」関係の設定は変更したら動かなくなるかもしれません。

あとは必要なjQuery本体など必要なjsを読み込ませて、「appleslider」メソッドを実行してください。

html

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.js"></script>
	<script type="text/javascript" src="js/jquery.appleslider.js"></script>
	<script type="text/javascript">
	$(function() {
		$('#slider').appleslider();
	});
	</script>
	

オプション設定

スピードとアニメーションするタイミングだけ調節できるようになっております。

javascript

	$(function() {
		$('#slider').appleslider({
			speed: 200,
			delay: 300
		});
	});