<div class="container" id="container">
    <ul>
      <li class="active"><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_1.jpg" alt="" /></li>
      <li><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_2.jpg" alt="" /></li>
      <li><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_3.jpg" alt="" /></li>
      <li><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_4.jpg" alt="" /></li>
    </ul>
</div>

<p class="larger">read the tutorial <a href="http://burnmind.com/tutorials/blinds-transition-slideshow-jquery">how to build a slideshow with a blinds transition using jQuery</a> @ <a href="http://burnmind.com/">burnmind.com</a></p>

<p>photos by <a href="http://www.flickr.com/photos/zoutedrop/">Bart Hiddink</a>, <a href="http://www.flickr.com/photos/epsos/">epSos .de</a>, and <a href="http://www.flickr.com/photos/billyboysfotocolection/">Billy Lindblom</a></p>

body
{
  background-color: #000;
  padding: 2%;
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
}

a
{
  color: #0CC5DA;
  text-decoration: none;
}

a:hover
{
  color: #DCE808;
  text-decoration: underline;
}

p
{
  margin: 0 auto;
  width: 960px;
  margin-top: 1%;
  text-align: center;
}

p.larger
{
  font-size: 1.1em;
}

.container
{
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.container span
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
}

.container ul, .container li
{
  padding: 0;
  margin: 0;
  list-style: none;
}

.container li
{
  display: none;
}

.container li.active
{
  display: inline;
}

$(document).ready(function(){
  var width = 960;
  height = 538;
  var numberOfBlinds = 20;
  var margin = 2;
  var color = '#000';
  gapHeight = 100;

  var container = $('#container');

  container.width(width).height(height);
  var blindWidth = width / numberOfBlinds;

  images = new Array();
  $('ul li', container).each(function() {
    images.push($(this)); 
  });

  images[0].addClass('active');
  activeImage = 0;

  for (var i = 0; i < numberOfBlinds; i++) {
    var tempEl = $(document.createElement('span'));
    var borders = calculateBorders();

    tempEl.css({
      'left': i * blindWidth,
      border: margin + 'px solid ' + color,
      borderTop: borders.borderWidthTop + 'px solid ' + color,
      borderBottom: borders.borderWidthBottom + 'px solid ' + color,
      'height': height,
      'width': blindWidth
    });
        
    container.prepend(tempEl);
  };

  blinds = $('span', container);
  setTimeout(animateBorders, 1000);
});

function calculateBorders() {
  var random = Math.floor((Math.random()*9)+1);
  var borderWidthTop = (random / 10) * gapHeight;
  var borderWidthBottom = gapHeight - borderWidthTop;

  return {borderWidthTop: borderWidthTop, borderWidthBottom: borderWidthBottom};
}

function animateBorders() {
  var changeOccuredOnce = false;

  blinds.animate({
    borderTopWidth: height / 2,
    borderBottomWidth: height / 2
  }, 1000, function() {
    if(!changeOccuredOnce) {
      images[activeImage].removeClass('active');
      activeImage = (activeImage + 1) % images.length;
      images[activeImage].addClass('active');
      setTimeout(animateBorders, 3000);
      changeOccuredOnce = true;
    }

    var borders = calculateBorders();

    $(this).delay(300).animate({
      borderTopWidth: borders.borderWidthTop,
      borderBottomWidth: borders.borderWidthBottom
    }, 1000);
  });
}