site_make

スライダーギャラリー

2015-01-21

スライダーギャラリー(カルーセル)

WEBサイトでトップページのメインビジュアル(アイキャッチ)に多く使われているスライダーは皆様もよく見かけていると思います。
イラストギャラリーでも使えると思いまして作り方を紹介していきます。
といっても、もちろんギャラリーではなくメインビジュアルとしてイラストサイトに設置してもいいですよね。

スライダーサンプル

  • sam03
  • sam01
  • sam02
  • sam02
  • sam02
  • sam02

こんな感じになります。動きがあるとユーザーも目を引かれやすいですからね。こういうギャラリーをスライダーとかカルーセルと言うんです。カルーセルはメリーゴーランドのことですよ。

html


 <div>
	 <ul id="thumbnail">
		 <li><a href=""></a>サムネール01</li>
		 <li><a href=""></a>サムネール02</li>
		 <li><a href=""></a>サムネール03</li>
	 </ul>
	 <div id="window">
		 <ul>
			<li>見せるイラスト01</li>
			<li>見せるイラスト02</li>
			<li>見せるイラスト03</li>
		 </ul>
	 </div>
 </div>

見せたいイラストがid=”window”の中に入っています。
このイラストを囲っている「li」達を「ul」ごと横にずらしてid=”window”から覗かせていきます。

css

cssの必須記述です。レイアウトはお好みで作って下さいね。


 #window {width:**;height:**;position:relative;overflow:hidden;}
 #window ul {position:asolute;}
 #window ul li {float:left;}

javascript(jQuery)


 var num = 0;

 var li = $('#window').find('li');
 var ul = $('#window').find('ul');

 li.clone().appendTo(ul);
 ul.css('width',li.width() * li.length * 2);

 function Action(){
	ul.stop().animate({"left":li.width() * -num + "px"});
	num++;
 }
 function Carousel(){
	if(num === 4){
		num = 0;
		ul.css('left',0);
		Action();
	}else{
		Action();
	}
 }

 var interval;

 function Interval(){
	interval = setInterval(function(){Carousel();},2000);
 }

 function Stop(){
	clearInterval(interval);
 }

 Interval();

 $('#thumbnail,#window').hover(function(){
	Stop();
 },function(){
	Interval();
 });

 $('#thumbnail').find('li').click(function(){
	num = $(this).index();
	Action();
 });

これはぱっと見では「意味分かんないっ!」ってなってしまうかもしれません・・・が、ゆっくり説明してみます。小分けしてみると意外と分りやすいのです。

小分け説明です


 var num = 0;

 var li = $('#window').find('li');
 var ul = $('#window').find('ul');

最初のこちらは下準備の記述です。numでイラストが動くたびにカウントしていきます。その最初なので0に設定します。
$(‘#window’).find(‘li’);・・・こんなの面倒ですので分りやすく = liとしました。今後書くのが面倒ですからね。

	
 li.clone().appendTo(ul);
 ul.css('width',li.width() * li.length * 2);

これも下準備です。画像が動き切っても途切れないようにクローンを作ってulに入れています。
そしてulにliが横一列に並ぶように幅を設定しました。(これはliの幅×数×2です。2はクローン用です。)


 function Action(){
	ul.stop().animate({"left":li.width() * -num + "px"});
	num++;
 }

 function Carousel(){
	if(num === 4){
		num = 0;
		ul.css('left',0);
		Action();
	}else{
		Action();
	}
 }

ここからがアクションです。一つ目はulがliの幅×numをマイナス(左)にアニメーションしてnumに+1をする。
2つ目でnumが4なら0にしてulの位置も0にしてアクション。違ったらそのまま1つ目のアクションをする。if構文というものです。もし、なら、ですね。


 var interval;

 function Interval(){
	interval = setInterval(function(){Carousel();},2000);
 }

 function Stop(){
	clearInterval(interval);
 }

 Interval();
	

まず、自動でスクロールするためにインターバルの時間設定。var interval;でintervalという名前の登録です。
そして、setinterval()関数でCarousel();を2秒ごとに。それをさっき登録したintervalに入れておきます。

clearInterval()関数でintervalを止める準備をします。とりあえずInterval();を置いて勝手に動かしておきます。
さてさて、もう少しです。


 $('#thumbnail,#window').hover(function(){
	Stop();
 },function(){
	Interval();
 });

 $('#thumbnail').find('li').click(function(){
	num = $(this).index();
	Action();
 });
	

id=”thumbnail”とid=”window”にhover(乗ったら)さっき準備したintervalを止めるStop();を、降りたら動くInterval();を、って指定します。
最後にサムネールをクリックしたら何番目かを読んでnumの番号にします。そして選んだイラストをスライドさせるというわけです。

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー