https://www.town.aya.miyazaki.jp/ssi/js/top-slideshow.js

1jQuery(document).ready(function($){
2
3	var makeDivParent = '#top_photo_wrap';
4	var makeDiv = '#top_photo';
5	var imgsSize;		 //画像枚数
6	var urlArray = [];	 //画像パス
7	var linkArray = [];	 //リンク先パス
8	var winArray = [];	 //リンクターゲット
9	var ttArray = [];	 //タイトル
10	var imagePath = '/img/photo/top/';
11	var minImgSize = 2;	//必要最低画像枚数
12
13	ajaxStart();
14	function ajaxStart(){
15		$.ajax({
16			type: 'GET',
17			url: '/img/photo/top/images.xml',
18			dataType: 'xml',
19			timeout: 2000,
20			error: function(){
21				return false;
22			},
23			success: function(xml){
24				imgsSize = ($(xml).find('Image').size());	//<Image>というタグの数を取得＝画像の枚数
25				$(xml).find('Image').each(function(){	//<Image>から</Image>の囲みの中から...
26					urlArray.push($(this).find('Path').text());		//<Path>タグを探して、テキスト部分を取得＝画像アドレス
27					linkArray.push($(this).find('img_link').text()); //<img link>タグを探して、テキストを取得＝リンク先アドレス
28					ttArray.push($(this).find('Title').text());		//<Title>タグを探して、テキストを取得＝画像タイトル
29					winArray.push($(this).find('Target').text());	//リンクターゲット
30				});
31			},
32			complete: function(){
33				// mainphoto_slider();
34				if(imgsSize >= minImgSize){
35					mainphoto_slider();
36				}else{
37					$('#top_photo').empty().wrap('<div id="top_photo_wrap" class="photo_single"></div>');
38					$('#top_photo').prepend('<div id="photo_image"></div>');
39					photosSet('#photo_image');
40				}
41			}
42		});
43	} //function ajaxset()
44
45	function photosSet(makeDiv) {
46		var imgNum = 0;	//画像番号（自然数）
47		var flg_caption = false;	// キャプションの有無
48		var flg_link = true;	// リンクの有無
49		var imgLinkTarget = '';
50		var i = 0;
51
52		for (i = 0; i < imgsSize; i++) {
53			imgNum = i+1;
54			$(makeDiv).append('<div class="pr'+imgNum+'"><img src="'+imagePath+urlArray[i]+'" alt="'+ttArray[i]+'" /></div>');
55			if (flg_caption === true && ttArray[i] !== '') {
56				$(makeDiv + ' .pr' + imgNum).append('<span class="photo_caption">' + ttArray[i] + '</span>');
57			}
58			if (flg_link === true && linkArray[i] !== '') {
59				imgLinkTarget = (winArray[i] !== '') ? winArray[i] : '_self';
60				$(makeDiv + ' .pr' + imgNum + ' img').wrap('<a href="' + linkArray[i] + '" target="' + imgLinkTarget + '" title="' + ttArray[i] + '" ></a>');
61			}
62		}
63	}
64
65	function mainphoto_slider(){
66		$('#top_photo').empty().wrap('<div id="top_photo_wrap"></div>');
67		$('#top_photo').prepend('<div id="photo_image"></div>');
68		$('#top_photo').append('<div id="mp_control_button"><button type="button" id="mp_control_prev"><img src="/img/top/btn_mv_prev.png" width="26" height="25" alt="前のスライド" /></button><button type="button" id="mp_control_next"><img src="/img/top/btn_mv_next.png" width="26" height="25" alt="次のスライド" /></button><button type="button" id="mp_control_pause"><img src="/img/top/btn_mv_stop.png" width="26" height="25" alt="停止" /></button><button type="button" id="mp_control_play"><img src="/img/top/btn_mv_start.png" width="26" height="25" alt="再生" /></button></div>');
69		photosSet('#photo_image');
70		$('#photo_image').slick({
71			autoplay: false,
72			autoplaySpeed: 5000,
73			speed: 750,
74			initialSlide: 0,
75			slidesToShow: 1,
76			slidesToScroll: 1,
77			centerMode: true,
78			centerPadding: 0,
79			infinite: true,
80			// fade: true,
81			prevArrow: '#mp_control_prev',
82			nextArrow: '#mp_control_next',
83			easing: 'swing',
84			touchMove: true,
85			// pauseOnHover: false,
86			touchThreshold: 15,
87			dots: true,
88		});
89
90		$('#photo_image').slick('slickPlay');
91		$('#mp_control_prev').on('click keypress',function(){
92			$('#photo_image').slick('slickPrev');
93		});
94		$('#mp_control_next').on('click keypress',function(){
95			$('#photo_image').slick('slickNext');
96		});
97		$('#mp_control_pause').on('click keypress',function(){
98			$('#mp_control_pause').hide();
99			$('#mp_control_play').show();
100			$('#photo_image').slick('slickPause');
101		});
102		$('#mp_control_play').on('click keypress',function(){
103			$('#mp_control_play').hide();
104			$('#mp_control_pause').show();
105			$('#photo_image').slick('slickPlay');
106		});
107	}
108
109});