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

画像スライド切り替え

注意
これらの記事は2016年当時の物で結構古いです。モダンブラウザでは不要な記述やJavaScriptでなくともCSSで実現できる機能もあります。 当時の記録として残してありますがあまり参考になるものではありません。
概要
画像スライド切り替え。
実装例はトップページの大きな画像です。
使用方法
実装は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>
 *
 * @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;
}