I want to have an image slideshow that changes pictures, with a random effect.
I currently have an image slideshow with fade in/out effect, and I want to switch the effect here and make it a random effect.
Can someone please help me?
Thanks.
What I have tried:
<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>