mikejmoran of Speak Creative
3/19/2019 - 7:45 PM

Simple Random Javascript Rotator

example.html
content_copyfile_download
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>

<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }

.fadelinks, .faderandom { position:relative; height:332px; width:500px; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }

.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

</head>
<body>
<h1>Simplest jQuery Slideshow</h1>
<p>Check out the <a href="/archives/javascript/simplest-jquery-slideshow">blog post</a>.</p>
<div class="fadein">
<img src="http://barasoft.co.uk/test/images/slides/hosting.png">
<img src="http://barasoft.co.uk/test/images/slides/cms.png">
<img src="http://barasoft.co.uk/test/images/slides/e-learning.png">
</div>

<h2>More Simple jQuery Slideshow: Random</h2>

<script>
  $(function(){
  $('.faderandom > :gt(0)').hide();
  setInterval(function(){
    var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
    $('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
    $('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
  }, 3000);
});
</script>
<div class="faderandom">
  <a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
<h2>More Simple jQuery Slideshow: With Links</h2>

<script>
  $(function(){
  $('.fadelinks > :gt(0)').hide();
  setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 3000);
});
</script>
<div class="fadelinks">
  <a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>

<h2>More Simple jQuery Slideshow: Multiple Slideshows</h2>

<script>
$(function(){
  $('.multipleslides').each(function(){
    // scope everything for each slideshow
    var $this = this;
    $('> :gt(0)', $this).hide();
    setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 3000);
  })
});
</script>
<div class="multipleslides">
  <a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
<div class="multipleslides">
  <a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
  <a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
</body>
</html>