Sliderman

In this example you have Random effect from the following: Rain, Stairs,Fade, delay 10 miliseconds, fading.

First stept is to create a html page and in the head section create link with css and js files:

    <script type="text/javascript" src="js/js.1.2.1.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />

In the body section copy the code:

    <div id="wrapper">

        <div id="examples_outer">

            <div id="slider_container_3">

                <div id="SliderName_3" class="SliderName_3">
                    <img src="img/01.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/02.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/03.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/04.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/05.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/06.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/07.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/08.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/09.jpg" width="800" height="200" alt="" title="" />
                    <img src="img/10.jpg" width="800" height="200" alt="" title="" />
                </div>
                <div class="c"></div>

                <script type="text/javascript">

                    demo3Effect1 = {name: 'myEffect31', top: true, move: true, duration: 400};
                    demo3Effect2 = {name: 'myEffect32', right: true, move: true, duration: 400};
                    demo3Effect3 = {name: 'myEffect33', bottom: true, move: true, duration: 400};
                    demo3Effect4 = {name: 'myEffect34', left: true, move: true, duration: 400};
                    demo3Effect5 = {name: 'myEffect35', rows: 3, cols: 9, delay: 50, duration: 100, order: 'random', fade: true};
                    demo3Effect6 = {name: 'myEffect36', rows: 2, cols: 4, delay: 100, duration: 400, order: 'random', fade: true, chess: true};

                    effectsDemo3 = [demo3Effect1,demo3Effect2,demo3Effect3,demo3Effect4,demo3Effect5,demo3Effect6,'blinds'];

                    var demoSlider_3 = Sliderman.slider({container: 'SliderName_3', width: 800, height: 200, effects: effectsDemo3, display: {autoplay: 3000}});
                </script>

                <div class="c"></div>
            </div>
            <div class="c"></div>
        </div>

        <div class="c"></div>
    </div>

In the css file copy the styles:

* { margin: 0; outline: none; }
body { background-color: #444444; }
.c { clear: both; }
#wrapper { margin: 0 auto; padding: 0 40px 60px 40px; width: 960px; }

#slider_container_3 { float: left; padding: 0; width: 800px; border: 1px #333333 solid; }

.SliderName_3 {
    float: left;
    width: 800px;
    height: 200px;
    overflow: hidden;
}

.SliderNamePrev_3 {
    background: url(../img/left.png) no-repeat left center;
    width: 50px;
    height: 450px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
}

.SliderNameNext_3 {
    background: url(../img/right.png) no-repeat right center;
    width: 50px;
    height: 450px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
}

.SliderName_3Description {
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}

#SliderNameNavigation_3 { margin: 0; padding: 10px 0 0 0; height: 16px; text-align: center; overflow-y: hidden; }

#SliderNameNavigation_3 a:link, #SliderNameNavigation_3 a:active, #SliderNameNavigation_3 a:visited, #SliderNameNavigation_3 a:hover{
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
}

#SliderNameNavigation_3 a.active:link, #SliderNameNavigation_3 a.active:active, #SliderNameNavigation_3 a.active:visited, #SliderNameNavigation_3 a.active:hover{
    background: url(../img/bullet_active.png) no-repeat center center;
}

#SliderNameNavigation_3 a img
{
    border: none;
    width: 16px;
    height: 16px;
    background: url(../img/bullet.png) no-repeat center center;
}

#SliderNameNavigation_3 a.active img
{
    background: url(../img/bullet_active.png) no-repeat center center;
}

The last step is to download  this script !