https://www.oriental-shop.jp/js/slideshow.js

1/*****
2 * override functions
3 */
4Array.prototype.shuffle = function(){
5    var len = this.length;
6    var ary = this.concat();
7    var res = [];
8    while(len) res.push(ary.splice(Math.floor(Math.random()*len--),1)[0]);
9    return res
10}
11if (!Array.prototype.filter) {
12	Array.prototype.filter = function(aCallback, aThisObject) {
13		var ret = [];
14		for (var i = 0, n = this.length; i < n; i++) {
15			if (aCallback.call(aThisObject, this[i], i, this)) {
16				ret.push(this[i]);
17			}
18		}
19		return ret;
20	}
21}
22if (!Array.prototype.forEach) {
23	Array.prototype.forEach = function(aCallback, aThisObject) {
24		for (var i = 0, n = this.length; i < n; i++) {
25			aCallback.call(aThisObject, this[i], i, this);
26		}
27	}
28}
29
30var slideshow = {};
31
32/*****
33 *
34 */
35slideshow.Observable = function() {
36	this.callbackChains      = null;
37	this.callbackIgnoreLevel = {};
38}
39slideshow.Observable.prototype.doCallback = function(name, /* arg1, arg2, ... */ _arguments) {
40	var chain = this.callbackChains;
41	if (!chain || !chain[name]) {
42		return undefined;
43	} else {
44		var ret;
45		var args = Array.prototype.slice.call(arguments, 1);
46
47		chain[name]
48			.filter(function(delegate) {
49				var level = this.callbackIgnoreLevel[name] || 'none';
50				switch (level) {
51					case 'preserved'  : return  delegate.isDisposable;
52					case 'disposable' : return !delegate.isDisposable;
53					case 'all'        : return  false;
54					case 'none'       : return  true;
55					default           : return  true;
56				}
57			}, this)
58			.forEach(function(delegate) {
59				ret = delegate.apply(null, args);
60			});
61
62		this.removeDisposableCallback(name);
63		return ret;
64	}
65}
66slideshow.Observable.prototype.addCallback = function(name, func, aThisObject, disposable) {
67	if (typeof name != 'string' || name == '') {
68		throw new TypeError('Observable.addCallback: argument \'name\' must be a string as callback name.');
69	} else if (typeof func != 'function') {
70		throw new TypeError('Observable.addCallback: argument \'func\' must be a Function object.');
71	} else {
72		if (!this.callbackChains      ) this.callbackChains       = {};
73		if (!this.callbackChains[name]) this.callbackChains[name] = [];
74
75		var delegate = slideshow.Delegate(func, aThisObject);
76		delegate.isDisposable = (disposable == 'disposable');
77		this.callbackChains[name].push(delegate);
78	}
79	return this;
80}
81slideshow.Observable.prototype.removeCallback = function(name, func, aThisObject) {
82	var chain = this.callbackChains;
83	if (typeof name != 'string' || name == '') {
84		throw new TypeError('Observable.removeCallback: argument \'name\' must be a string as callback name.');
85	} else if (chain && chain[name]) {
86		if (typeof func != 'function') {
87			delete chain[name];
88		} else {
89			var obj = (typeof aThisObject == 'object' && aThisObject) ? aThisObject : window;
90			chain[name] = chain[name].filter(function(delegate) {
91				return (delegate.func !== func || delegate.aThisObject !== obj);
92			});
93		}
94	}
95	return this;
96}
97slideshow.Observable.prototype.removeDisposableCallback = function(name) {
98	var chain = this.callbackChains;
99	if (chain && chain[name]) {
100		chain[name] = chain[name].filter(function(delegate) { return !delegate.isDisposable });
101	}
102	return this;
103}
104slideshow.Observable.prototype.ignoreCallback = function(name, level) {
105	var chain = this.callbackChains;
106	if (typeof name != 'string' || name == '') {
107		throw new TypeError('Observable.ignoreCallback: argument \'name\' must be a string as callback name.');
108	} else if (chain && chain[name]) {
109		var levels = ['all', 'preserved', 'disposable', 'none'];
110		this.callbackIgnoreLevel[name] = (levels.indexOf(level) != -1) ? level : 'all';
111	}
112	return this;
113}
114
115/**
116 *
117 */
118slideshow.Delegate = function(func, aThisObject) {
119	if (typeof func != 'function') {
120		throw new TypeError('slideshow.Delegate: first argument must be a function object.');
121	} else {
122		var aThisObj = aThisObject || window;
123		var delegate = function(){
124			return func.apply(aThisObj, arguments);
125		};
126		delegate.func        = func;
127		delegate.aThisObject = aThisObj;
128		return delegate; 
129	}
130}
131
132/*****
133 *
134 */
135var __SLIDESHOW_IMAGES__ = [];
136var __SLIDESHOW_SETTING__ = {
137	  width: '960'
138	, height: '360'
139};
140slideshow.Slideshow = function (node) {
141	this.initialize(node);
142}
143slideshow.Slideshow.prototype.initialize = function (node) {
144	this.node = node;
145	this.image_datas = __SLIDESHOW_IMAGES__;
146	this.items = [];
147	this.current_index = 0;
148	this.show_timer = null;
149	this.wate_timer = null;
150	this.prepare();
151};
152slideshow.Slideshow.prototype.prepare = function () {
153	this.node.css({
154		  'overflow': 'hidden'
155		, 'position': 'relative'
156		, width     : __SLIDESHOW_SETTING__.width
157		, height    : __SLIDESHOW_SETTING__.height
158	});
159	this.node.empty();
160	var item;
161	for ( var i = 0; i < this.image_datas.length; i++ ) {
162		item = new slideshow.SlideshowItem(this.image_datas[i], i);
163		item.appendTo(this.node);
164		item.addCallback('showComplete', this.itemShowCompleteHandler, this);
165		this.items.push(item);
166	}
167	this.current_index = Math.floor(Math.random()*this.image_datas.length);
168	this.items[this.current_index].show(true);
169}
170slideshow.Slideshow.prototype.start = function () {
171	this.itemShowCompleteHandler();
172};
173slideshow.Slideshow.prototype.changeImage = function () {
174	for ( var i= 0; i< this.items.length; i++ ) {
175		this.items[i].setIndex(1);
176	}
177	this.items[this.current_index].setIndex(2);
178	this.items[this.current_index].hide();
179
180	this.show_timer = setTimeout(slideshow.Delegate(function(){
181		this.current_index++;
182		if ( this.current_index >= this.items.length ) this.current_index = 0;
183		this.items[this.current_index].setIndex(3);
184		this.items[this.current_index].show();
185		clearTimeout(this.show_timer);
186	},this), 500);
187};
188slideshow.Slideshow.prototype.itemShowCompleteHandler = function () {
189	this.wate_timer = setTimeout(slideshow.Delegate(function(){
190		this.changeImage();
191		clearTimeout(this.wate_timer);
192	},this), 7000);
193};
194
195
196/*****
197 *
198 */
199slideshow.SlideshowItem = function (params, index) {
200	this.initialize(params, index);
201};
202slideshow.SlideshowItem.prototype = new slideshow.Observable;
203slideshow.SlideshowItem.prototype.initialize = function (params, index) {
204	var img = $('<img>').attr({
205		  src    : params.src
206		, alt    : params.alt
207		, width  : __SLIDESHOW_SETTING__.width
208		, height : __SLIDESHOW_SETTING__.height
209	})
210	.css({
211		border: 'none'
212	});
213	this.node = $('<a />').attr({
214		'href': params.href
215	})
216	.css({
217		  position : 'absolute'
218		, display:   'block'
219		, width  : __SLIDESHOW_SETTING__.width
220	});
221	
222	this.node.append(img);
223	
224	this.index = index;
225	
226	this.node.hide();
227};
228slideshow.SlideshowItem.prototype.getIndex = function () {
229	return this.index;
230}
231slideshow.SlideshowItem.prototype.setIndex = function (index) {
232	this.index = index;
233	this.node.css('z-index',index);
234}
235slideshow.SlideshowItem.prototype.appendTo = function (node) {
236	this.node.appendTo(node);
237};

238slideshow.SlideshowItem.prototype.show = function (immediatery) {
239	if ( immediatery ) {
240		this.node.show();
241		return this;
242	}
243
244	var self = this;
245	this.node
246		.css({
247			  left: this.node.width()
248			, opacity: 1
249		})
250		.show()
251		.animate({
252			left: 0
253		},{
254			  duration : 1000
255			, easing   : 'easeOutCubic'
256			, complete : function(){
257							self.showComplateHandler();
258						}
259		});
260	return this;
261};
262slideshow.SlideshowItem.prototype.hide = function (immediatery) {
263	if ( immediatery ) {
264		this.node.hide();
265		return this;
266	}
267	return this;
268	var self = this;
269	this.node.animate({
270		opacity: 0
271	},{
272		  duration : 1000
273		, easing   : 'easeInOutSine'
274		, complete : function(){
275						self.hideComplateHandler();
276					}
277	});
278	return this;
279};
280slideshow.SlideshowItem.prototype.showComplateHandler = function () {
281	this.doCallback('showComplete');
282};
283slideshow.SlideshowItem.prototype.hideComplateHandler = function () {
284	this.doCallback('hideComplete');
285};