В JavaScript случайное изображение и перехода слайд-шоу

---

Я хочу иметь слайд-шоу изображений, которое меняет картинки со случайным эффектом.
В настоящее время у меня есть слайд-шоу изображений с эффектом fade in/out, и я хочу переключить этот эффект здесь и сделать его случайным эффектом.
Может кто-то пожалуйста, помогите мне?
Спасибо.

Что я уже пробовал:

<style>
	#slider {
		opacity:1;
		transition: opacity 1s; 
	}

	#slider.fadeOut {
		opacity:0;
	}
	</style>
	<img id="slider"  src="1.png">
	<img id="slider"  src="10.png" >
	<img id="slider"  src="11.png" >
	<img id="slider"  src="12.png" >
	<img id="slider"  src="13.png" >
	<img id="slider"  src="14.png" >
	<img id="slider"  src="15.png" >
	<img id="slider"  src="16.png" >
	<img id="slider"  src="17.png" >
	<img id="slider"  src="18.png" >
	<img id="slider"  src="19.png" >
	<img id="slider"  src="2.png" >
	<img id="slider"  src="20.png" >
	<img id="slider"  src="21.png" >
	<img id="slider"  src="22.png" >
	<img id="slider"  src="23.png" >
	<img id="slider"  src="24.png" >
	<img id="slider"  src="25.png" >
	<img id="slider"  src="26.png" >
	<img id="slider"  src="27.png" >
	<img id="slider"  src="3.png" >
	<img id="slider"  src="4.png" >
	<img id="slider"  src="5.png" >
	<img id="slider"  src="6.png" >
	<img id="slider"  src="7.png" >
	<img id="slider"  src="8.png" >
	<img id="slider"  src="9.png" >
	<script>
	var imgArray = [
		'1.png',
	'10.png',
	'11.png',
	'12.png',
	'13.png',
	'14.png',
	'15.png',
	'16.png',
	'17.png',
	'18.png',
	'19.png',
	'2.png',
	'20.png',
	'21.png',
	'22.png',
	'23.png',
	'24.png',
	'25.png',
	'26.png',
	'27.png',
	'3.png',
	'4.png',
	'5.png',
	'6.png',
	'7.png',
	'8.png',
	'9.png'	],
		curIndex = 0;
		imgDuration = 3000;

	function slideShow() {
		document.getElementById('slider').className += "fadeOut";
		setTimeout(function() {
			document.getElementById('slider').src = imgArray[curIndex];
			document.getElementById('slider').className = "";
		},1000);
		curIndex++;
		if (curIndex == imgArray.length) { curIndex = 0; }
		setTimeout(slideShow, imgDuration);
	}
	slideShow();
	</script>

---