https://www.city.fussa.tokyo.jp/_template_/_site_/_default_/_res/js/topics_menu.js

1//------------------------------------------------------------------------------
2//	トピックスライダー(横スライドタイプ、無限ループバージョン)
3//	Copyright (C) 2015 FUTUREINN CO., LTD. All Rights Reserved.
4//
5//------------------------------------------------------------------------------
6
7(function(){
8var $ = FI.jQuery;
9
10	$(function() {
11		
12		if($("#topicsmenu").size() > 0){
13
14			var $tmenu = $('#topicsmenu .tmenu');
15			var $r_menu = $('#topicsmenu ul');
16			var tmulwidth = 0; //liの横幅
17			var isAct = true;  //スライド機能を有効とするかどうか
18			var processing = false; //処理中かどうかの判定フラグ（連打防止用）
19
20			//←を押したとき
21			$("#forward").click(function(){
22				if(isAct && !processing){
23					processing = true;
24					var $first = $r_menu.children('li:first')
25					var $last = $r_menu.children('li:last')
26					var left = $first.width() + parseInt($first.css('margin-left'), 10);
27					//リストの最後を先頭にコピーし座標を一つ分動かした後、アニメーションし、コピー元を消す
28					$last.clone().prependTo($r_menu);
29					$tmenu.scrollLeft(left);
30					//左右で若干初動速度が違うので、'slow:600'に対し780ミリ秒に調整
31					$tmenu.animate({scrollLeft:0-left}, 780,function(){
32						$last.remove();
33						processing = false;
34					});
35				}
36				return false;
37			});
38
39			//→を押したとき
40			$("#back").click(function(){
41				if(isAct && !processing){
42					processing = true;
43					var $first = $r_menu.children('li:first')
44					var left = $first.width() + parseInt($first.css('margin-left'), 10);
45					//リストの先頭を最後にコピーし、アニメーションした後、コピー元を消して座標をリセット
46					$r_menu.children('li:first').clone().appendTo($r_menu);
47					$tmenu.animate({scrollLeft:left}, 'slow',function(){
48						$first.remove();
49						$tmenu.scrollLeft(0-left);
50						processing = false;
51					});
52				}
53				return false;
54			});
55			
56			function judgeSlide(){
57				//スクロールしなくてもliの内容が全部見えている場合、スクロールさせる必要はないので、機能OFF
58				if(tmulwidth <= $tmenu.width()){
59					isAct = false;
60				}else{
61					isAct = true;
62				}
63			}
64
65			//------------------------------------------------------------
66			// ウインドウリサイズ時、機能をOFFにするかどうかを判定する
67			//------------------------------------------------------------
68			var timer = false;
69			$(window).resize(function() {
70				if (timer !== false) {
71					clearTimeout(timer);
72				}
73				timer = setTimeout(function() {
74					judgeSlide();
75					clearTimeout(timer);
76				}, 200);
77			});
78
79			//------------------------------------------------------------
80			// 初期処理
81			//------------------------------------------------------------
82			//表示スタイルの補正
83			$tmenu.css( 'overflow', 'hidden');
84			$r_menu.children('li').each(function(){
85				tmulwidth = tmulwidth + $(this).width() + parseInt($(this).css('margin-right'), 10);
86			});
87			$('#topicsmenu ul').css( 'width', tmulwidth*2);
88
89			//横幅の判定
90			judgeSlide()
91
92		}
93
94	 });
95	 
96})();