A few lines, Simple jQuery slideshow

by in , 0

The code is only a few lines long

Just copy this code and save to a file.html

 




<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>
Check out the <a href="https://www.blogger.com/archives/javascript/simplest-jquery-slideshow">blog post</a>.


<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
</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="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><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="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><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="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<div class="multipleslides">
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
</body>
Demo:

More Simple jQuery Slideshow: Random


More Simple jQuery Slideshow: With Links


More Simple jQuery Slideshow: Multiple Slideshows


Leave a Reply