Change the Randomly Images using jQuery

You can use this script for change/display the randomly images.

by Aqeel Malik

HTML

<ul id="rotator">
  <li>
    <div class="rotator-image img1"></div>
    <div class="rotator-image img2"></div>
    <div class="rotator-image img3"></div>
    <div class="rotator-image img4"></div>
    <div class="rotator-image img5"></div>
  </li>
  <li>
    <div class="rotator-image img1"></div>
    <div class="rotator-image img2"></div>
    <div class="rotator-image img3"></div>
    <div class="rotator-image img4"></div>
    <div class="rotator-image img5"></div>
  </li>
  <li>
    <div class="rotator-image img1"></div>
    <div class="rotator-image img2"></div>
    <div class="rotator-image img3"></div>
    <div class="rotator-image img4"></div>
    <div class="rotator-image img5"></div>
  </li>
  <li>
    <div class="rotator-image img1"></div>
    <div class="rotator-image img2"></div>
    <div class="rotator-image img3"></div>
    <div class="rotator-image img4"></div>
    <div class="rotator-image img5"></div>
  </li>
  <li>
    <div class="rotator-image img1"></div>
    <div class="rotator-image img2"></div>
    <div class="rotator-image img3"></div>
    <div class="rotator-image img4"></div>
    <div class="rotator-image img5"></div>
  </li>
</ul>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
* {margin:0; padding:0} li {list-style:none}
#rotator li,
.rotator-image{width: 100px; height: 100px; float: left; position: relative}
.rotator-image{position: absolute; display: none}
.img1{background-color: red;}
.img2{background-color: blue}
.img3{background-color: green}
.img4{background-color: black}
.img5{background-color: yellow}

JavaScript

$(function(){
	// for each list item in the rotator ul, generate show a random list item
	$('#rotator > li').each(function(){
		// save images in an array
		var $imgArr = $(this).children();
		// show a random image
		$imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
	});
	// change the image (random image) function
	$.fn.WT_RANDOM_IMAGE = function () {
		// save list items in an array
		var $liArr = $('#rotator > li');
		// select a random list item
		var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
		// get the currently visible image
		var $currImg = $('.rotator-image:visible', $currLi);
		var $next = ($currImg.next().length == 1) ? $currImg.next() : $('.rotator-image:first', $currLi);
		$currImg.fadeOut(); $next.fadeIn();
	};
	// run the WT_RANDOM_IMAGE function after every (delay) miliseconds
	setInterval(function() {$.fn.WT_RANDOM_IMAGE();}, 2000);
});