画像スライド切り替え

/**
 * 画像切り替え
 *
 * usage:
 * img と lnk と opt で指定
 *
 * <script>
 * var replacedimage = [
 * 	{'img':'image_index/slideImage01.jpg','lnk':'','opt':'onclick="FlyOutObj.clickImg(this);" data-flyout-object="detailformobject"'}
 * 	,{'img':'image_index/slideImage02.jpg','lnk':'about.php','opt':''}
 * 	,{'img':'image_index/slideImage03.jpg','lnk':'contact.php','opt':''}
 * 	,{'img':'image_index/slideImage04.jpg','lnk':'faq.php','opt':''}
 * 	,{'img':'image_index/slideImage05.jpg','lnk':'product.php','opt':''}
 * 	,{'img':'image_index/slideImage06.jpg','lnk':'http://yahoo.co.jp/','opt':''}
 * 	,{'img':'image_index/slideImage07.jpg','lnk':'[targetblank]http://yahoo.co.jp/','opt':''}
 * ];
 * </script>
 *
 * @author ao-system
 */

(function(window,document,replacedimage) {
	var slideImageCount = replacedimage.length;
	var slideImageCurrent = 0;
	var autoScrollFlag = true;
	var busyFlag = false;
	var changeSpan = 3000;	//画像と画像の間隔
	var changeSpeed = 1200;	//切り替わる速度
	var slideWidth = 50;	//切り替わるスライド幅
	var focusBlurFlag = true;	//フォーカスが外れている時は動作させないため
	var imgResource = [];
	var readImgFlag = [];
	init();
	function init() {
		document.getElementById('slideImage01').src = replacedimage[0].img;
		document.getElementById('slideImage02').src = replacedimage[0].img;
		document.getElementById('slideImage01').style.transition = 'all ' + (changeSpeed / 1000)  + 's';
		document.getElementById('slideImage02').style.transition = 'all ' + (changeSpeed / 1000) + 's';
		document.getElementById('slideImage02').style.display = 'none';
		document.getElementById('slideImage02').style.opacity = 0;
		document.getElementById('slideImage02').style.marginLeft = slideWidth + 'px';
		setOption(document.getElementById('slideImage02'),replacedimage[0].opt);
		slidePreloadSet();
		addEvt(document.getElementById('slideImage01'),'click', locationChange);
		addEvt(document.getElementById('slideImage02'),'click', locationChange);
		addEvt(document.getElementById('slideArrowLeft'),'click', slideArrowLeft);
		addEvt(document.getElementById('slideArrowRight'),'click', slideArrowRight);
		setTimeout(function(){autoScroll()},changeSpan);
		addEvt(window,'focus',function(){ focusBlurFlag = true;});
		addEvt(window,'blur',function(){ focusBlurFlag = false;});
		slideBall();
		slideBallOff();
		slideBallOn();
	}
	function setOption(imgObj,opt) {
		if (opt == '') {
			return;
		}
		var ary = opt.match(/(.*?)\="(.*?)"/g);
		for (var i = 0; i < ary.length; i++) {
			var ary2 = ary[i].split('=');
			imgObj.setAttribute(ary2[0].replace(/ /g,''),ary2[1].replace(/"/g,''));
		}
	}
	function autoScroll() {
		if (autoScrollFlag == false) {
			autoScrollFlag = true;
			setTimeout(function(){autoScroll()},changeSpan);
		} else {
			if (focusBlurFlag) {
				slideArrowRight();
			}
			setTimeout(function(){autoScroll()},changeSpan);
		}
	}
	function slideArrowRight() {
		autoScrollFlag = false;
		if (busyFlag) {
			return;
		}
		busyFlag = true;
		arrowShow(false);
		if (slideImageCurrent == (slideImageCount - 1)) {
			slideImageCurrent = -1;
		}
		document.getElementById('slideImage02').src = replacedimage[slideImageCurrent + 1].img;
		document.getElementById('slideImage02').style.display = 'inline';
		document.getElementById('slideImage02').style.opacity = 0;
		document.getElementById('slideImage02').style.marginLeft = slideWidth + 'px';
		document.getElementById('slideImage02').style.transition = 'all ' + (changeSpeed / 1000) + 's';
		document.getElementById('slideImage02').onload = function(){
			setTimeout(function(){slideArrowRight01();},100);
		}
	}
	function slideArrowRight01() {
		document.getElementById('slideImage02').style.opacity = 1;
		document.getElementById('slideImage02').style.marginLeft = '0px';
		slideBallOff();
		setTimeout(function(){
			document.getElementById('slideImage01').src = replacedimage[slideImageCurrent + 1].img;
			setOption(document.getElementById('slideImage01'),replacedimage[slideImageCurrent + 1].opt);
			document.getElementById('slideImage02').style.display = 'none';
			document.getElementById('slideImage02').style.transition = 'all 0s';
			document.getElementById('slideImage02').style.opacity = 0;
			document.getElementById('slideImage02').style.marginLeft = slideWidth + 'px';
			slideImageCurrent += 1;
			slidePreloadSet();
			arrowShow(true);
			slideBallOn();
			busyFlag = false;
		},changeSpeed);
	}
	function slideArrowLeft() {
		autoScrollFlag = false;
		if (busyFlag) {
			return;
		}
		busyFlag = true;
		arrowShow(false);
		var slideImageCurrentNow = slideImageCurrent;
		if (slideImageCurrent == 0) {
			slideImageCurrent = slideImageCount;
		}
		document.getElementById('slideImage02').src = replacedimage[slideImageCurrent - 1].img;
		document.getElementById('slideImage02').style.display = 'inline';
		document.getElementById('slideImage02').style.marginLeft = '-' + slideWidth + 'px';
		document.getElementById('slideImage02').style.opacity = 0;
		document.getElementById('slideImage02').style.transition = 'all ' + (changeSpeed / 1000) + 's';
		document.getElementById('slideImage02').onload = function(){
			setTimeout(function(){slideArrowLeft01();},100);
		}
	}
	function slideArrowLeft01(num) {
		document.getElementById('slideImage02').style.marginLeft = '0px';
		document.getElementById('slideImage02').style.opacity = 1;
		slideBallOff();
		setTimeout(function(){
			document.getElementById('slideImage01').src = replacedimage[slideImageCurrent - 1].img;
			setOption(document.getElementById('slideImage01'),replacedimage[slideImageCurrent - 1].opt);
			document.getElementById('slideImage02').style.display = 'none';
			document.getElementById('slideImage02').style.transition = 'all 0s';
			document.getElementById('slideImage02').style.opacity = 0;
			document.getElementById('slideImage02').style.marginLeft = slideWidth + 'px';
			slideImageCurrent -= 1;
			slidePreloadSet();
			arrowShow(true);
			busyFlag = false;
			slideBallOn();
		},changeSpeed);
	}
	function slidePreloadSet() {
		var next = slideImageCurrent + 1;
		var prev = slideImageCurrent - 1;
		if (next == slideImageCount) {
			next = 0;
		}
		if (prev == -1) {
			prev = slideImageCount - 1;
		}
		document.getElementById('slidePreload01').setAttribute('src',replacedimage[next].img);
		document.getElementById('slidePreload02').setAttribute('src',replacedimage[prev].img);
	}
	function locationChange() {
		if (replacedimage[slideImageCurrent].lnk != '') {
			var lnkStr = replacedimage[slideImageCurrent].lnk;
			if (lnkStr.length > 13 && lnkStr.substr(0,13) == '[targetblank]') {	// [targetblank]http://example.com/ の場合は別タブ
				window.open(lnkStr.substr(13),'_blank');
			} else {
				window.location.href = lnkStr;
			}
		}
	}
	function arrowShow(flag) {
		if (flag) {
			document.getElementById('slideArrowLeft').style.opacity = 1;
			document.getElementById('slideArrowRight').style.opacity = 1;
		} else {
			document.getElementById('slideArrowLeft').style.opacity = 0;
			document.getElementById('slideArrowRight').style.opacity = 0;
		}
	}
	function slideBall() {
		var htm = '';
		for (var i = 0; i < slideImageCount; i++) {
			htm += '<span id="slideBall' + i + '">●</span>';
		}
		document.getElementById('slideBall').innerHTML = htm;
		for (var i = 0; i < slideImageCount; i++) {
			(function(i){
				document.getElementById('slideBall' + i).addEventListener('click',function(){directPage(i);},false);
			})(i);
		}
	}
	function slideBallOff() {
		for (var i = 0; i < slideImageCount; i++) {
			document.getElementById('slideBall' + i).style.color = '#555';
		}
	}
	function slideBallOn() {
		document.getElementById('slideBall' + slideImageCurrent).style.transition = 'color 1s';
		document.getElementById('slideBall' + slideImageCurrent).style.color = '#e61';
	}
	function directPage(num) {
		if (busyFlag) {
			return;
		}
		slideImageCurrent = (num - 1);
		if (slideImageCurrent == (slideImageCount - 1)) {
			slideImageCurrent = -1;
		}
		slideArrowRight();
	}
	function addEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.addEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.attachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = func;
		}
	}
})(window,document,replacedimage);
	

<div id="slidewrapper01a"><div id="slidewrapper01b">
	<img id="slidePreload01">
	<img id="slidePreload02">
	<img id="slideImage01">
	<img id="slideImage02">
	<img id="slideArrowLeft" src="./image/arrow_left.svg">
	<img id="slideArrowRight" src="./image/arrow_right.svg">
	<div id="slideBall"></div>
</div></div>
	

#slidewrapper01a {
	overflow: hidden;
	position: relative;
}
#slidewrapper01a #slidewrapper01b {
    /*height: 500px; jsで処理 */
}
#slidewrapper01a #slidewrapper01b #slidePreload01
,#slidewrapper01a #slidewrapper01b #slidePreload02 {
	display: none;
}
#slidewrapper01a #slidewrapper01b #slideImage01
,#slidewrapper01a #slidewrapper01b #slideImage02 {
	position: absolute;
	top: 0;
	width: 100%;
}
#slidewrapper01a #slidewrapper01b #slideArrowLeft {
	display: block;
	position: absolute;
	top: 140px;
	left: 0px;
	cursor: pointer;
}
#slidewrapper01a #slidewrapper01b #slideArrowRight {
	display: block;
	position: absolute;
	top: 140px;
	right: 0px;
	cursor: pointer;
}
#slidewrapper01a #slidewrapper01b #slideBall {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 1%;
}
#slidewrapper01a #slidewrapper01b #slideBall span {
	font-size: 18px;
	letter-spacing: 0.6em;
	cursor: pointer;
}
#slidewrapper01a #slidewrapper01b #slideBall span:hover {
	text-shadow: 0 0 5px #fff;
}