ど素人から毛を生やす。<延>

餅。式無限ループjs

Web > javascript 2014年3月20日(最終更新:3年前)

このページは2014.3.20に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
残業嫌いの餅。です。

同僚が職場で朝を迎えたそうです(´・ω・`)

さて、今回はjsについてです。

最近、いわゆる高級ペライチサイトなんかだと、ページの無限ループってよくありますよね。

あと、スライドショーやカルーセルなんかを作るときにも、端まで行ったら最初に戻るよりループし続ける方が美しい。

jsで無限ループを実現する方法は色々あると思いますが、僕なりのやり方を公開してみたいと思います。

h260320

昔、RPGツクール2003を触ったときには「マップのループ」という項目が存在しましたが、XPになるとそれが廃止されてしまったという事例があったのを思い出しました。

対策も同じようなもので、端まで来たら端に自動ワープさせれば良いです。

で、ワープの方法ですが、僕的には、

$("ワープさせたい要素").animate({scrollLeft(またはscrollTop):開始地点}, 1, "swing");

が好きですね。
…いえ、もっと簡単にできるのですが、このコマンドはかなりよく使うので、運用が楽なんです、それだけですw

カルーセルの場合は、スライドが動き出す直前に、全く見た目が同じ前の項目にワープさせます。
こうすれば、ひたすら右に進んでいるように見えて、実は同じ所で足踏みさせることが可能です。

そんなわけで、僕的無限カルーセルのソース晒します。
HTMLとCSSはいつものように、サイズとoverflow:hoddenを設定した親要素に、widthを広く(孫要素の合計の最低4倍)設定した子要素を置き、その中にカルーセルの中身を横並べにします。アニメーションで動かすのは、hiddenを指定した親要素です。

$(function(){

	var productHow = $('.cal ul li').length;	// カルーセルの数
	var productno = 1 ;		// カルーセルの現在番号

	var w = 1026 /*$(window).width()*/ ;  // カルーセルの幅
	var d = 189 // 	画像の幅

	var q = productHow * d ; // カルーセルの基準位置(ずれるときは調整)

	var element = $('.cal ul li').clone(true) ; // カルーセルを複製
	$(".cal ul").append(element); // cal ul の末尾に複製を挿入
	var element = $('.cal ul li').clone(true) ; // カルーセルを複製
	$(".cal ul").append(element); // cal ul の末尾に複製を挿入


	setInterval(function() {
				if(productno >= productHow){
					productno=1;
				}else{
					productno++;
				}

			var p = q + ( ( productno - 2 ) * d ) ;

			$(".cal").animate({scrollLeft:p}, 1, "swing", function(){

				p =  q + ( ( productno - 1 ) * d ) ;

				$(".cal").animate({scrollLeft:p}, 1000, "swing");

			});
	}, 2000);
});
この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (`・ω・´) 役に立った (0)
  • (・∀・) 参考になった (4)