jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

画像スライド切り替え

概要
画像スライド切り替え。
実装例はトップページの大きな画像です。
使用方法
実装はjsのコメントに書いてあるような感じで行います。
htmlとcssも適切に設定する必要があります。
画像高さは可変ですので、cssのコメント通り別途JavaScriptで制御する必要があります。
備考
色々拡張して現在はこの形ですが実装時点で不要な機能もあったりします。

/**
 * 画像切り替え
 *
 * 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>
 *
 * @auther 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;
}
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page