月別アーカイブ: 2014年7月

フリップするスライドの作成

フリップのスライドショーを作れる

flipsnap.jsを使用
サイト
http://pxgrid.github.io/js-flipsnap/demo.html

参考サイト
http://designdrill.jp/wordpress/?p=5331

テスト
http://bh0505.com/test/sp/flipsnap/

$(function() {
		var touchFlg = false;//---最初はタッチされていない
		var maxPage = 3-1;//----最大ページ
		var $pointer = $('#demo2 .pointer span');
		var flipsnap = Flipsnap('#demo2 .flipsnap', {
			distance: 220
		});
		resizeFunc();

		flipsnap.element.addEventListener('fspointmove', function() {
			$pointer.filter('.current').removeClass('current');
			$pointer.eq(flipsnap.currentPoint).addClass('current');
		}, false);
		
		$pointer.click(
			function(){
				var clickID = Number(this.id);
				flipsnap.moveToPoint(clickID);	
			}
		);
				
		//---3秒でページを切り替える
		function changeFunc() {
			if ( touchFlg ) return;//----タッチ中であれば処理しない
			maxPage < flipsnap.currentPoint+1 ? flipsnap.moveToPoint(0) : flipsnap.toNext();
		}
		setInterval(changeFunc,3000);
		
		//---タッチの管理
		$("#demo2 .flipsnap").on("touchstart mousedown" ,function(){touchFlg = true});
		$("#demo2 .flipsnap").on("touchend touchcancel mouseup" ,function(){touchFlg = false});


	});