In this study, our goal was to compare the development time to create a very simple 3 slide rotator in jQuery vs. Adobe Flash.

From the start, It seems clear that jQuery poses a couple advantages:

  • Free
  • No proprietary software required
  • Ability to change the fade / delay speeds easily

While, Adobe Flash will certainly offer more control to fine tune any given rotator / slideshow.

For our Case Study, I was looking to create a very simple rotator with simple fade in/out transitions and image captions.


jQuery rotator: 35 minutes

Flash rotator: 32 minutes


Given the slight development time improvement of the Flash rotator, my personal choice would still be jQuery. The jQuery rotator has fewer dependencies (the jQuery library and that the browser supports Javascript). The code is also clean and elegant.  Given, that if this rotator had more the 3 slides, the code would get a little "nested".


body { margin-top: 80px; background-color: #030001; }
div { position: absolute; left: 50%; top: 50%; margin-left: -375px; margin-top: -280px; }
table { display: none; position: absolute; left: 50%; top: 50%; margin-left: -500px; margin-top: -205px; }
table td { text-align: center; width: 485px; padding-left: 15px; }
table td:first-child { padding-right: 15px; padding-left: 0; }
img { display: none; }
table img { display: block; }
a img { border: 0; }

.slide-text { margin-top: 35px; }
.enter { margin: 23px auto; }


The jQuery

    $('#slide1-image').fadeIn(2000, function() {
        $('#slide1-text').fadeIn(2000, function() {
            $('#slide1-text').delay(3000).fadeOut(1500, function() {
                $('#slide2-image').fadeIn(2000, function() {
                    $('#slide2-text').fadeIn(2000, function() {

                        $('#slide2-text').delay(3000).fadeOut(1500, function() {




<!DOCTYPE html>
<html lang="en">
    <meta charset=utf-8 />
    <title>sitekickr Example</title>
    <link media="screen" rel="stylesheet" href="img.css" />
    <script src=""></script>
    <script src="img.js"></script>

    <div id="slide1">
        <img id="slide1-image" src="" alt="" />
        <a href=""><img id="slide1-text" class="slide-text" src="" alt="" /></a>

    <div id="slide2">
        <img id="slide2-image" src="" alt="" />
        <a href=""><img id="slide2-text" class="slide-text" src="" alt="" /></a>
    <table id="slide3">
            <img id="slide3-left" src="" alt="" />
            <a href=""><img id="enter-left" class="enter" src="" alt="" /></a>
            <img id="slide3-right" src="" alt="" />       
            <a href=""><img id="enter-right" class="enter" src="" alt="" /></a>

Leave a Reply

Your email address will not be published. Required fields are marked *