<div class="rotator">

    <ul id="rotmenu">

        <li>

            <a href="rot1">Portfolio</a>

            <div style="display:none;">

                <div class="info_image">1.jpg</div>

                <div class="info_heading">Our Works</div>

                <div class="info_description">

     At vero eos et accusamus et iusto odio

    dignissimos ducimus qui blanditiis praesentium

    voluptatum deleniti atque corrupti quos dolores et

    quas molestias excepturi sint occaecati cupiditate

    non provident...

                    <a href="#" class="more">Read more</a>

                </div>

            </div>

        </li>

        <li>

            <a href="rot2">Services</a>

            <div style="display:none;">

                <div class="info_image">2.jpg</div>

                <div class="info_heading">We serve</div>

                <div class="info_description">

     At vero eos et accusamus et iusto odio

    dignissimos ducimus qui blanditiis praesentium

    voluptatum deleniti atque corrupti quos dolores et

    quas molestias excepturi sint occaecati cupiditate

    non provident...

                    <a href="#" class="more">Read more</a>

                </div>

            </div>

        </li>

        ...

    </ul>

    <div id="rot1">

        <img src="" width="800" height="300" class="bg" alt=""/>

        <div class="heading">

            <h1></h1>

        </div>

        <div class="description">

            <p></p>

        </div>

    </div>

</div>

.rotator{

    background-color:#222;

    width:800px;

    height:300px;

    margin:0px auto;

    position:relative;

    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:-1px;

    border:3px solid #f0f0f0;

    overflow:hidden;

    -moz-box-shadow:0px 0px 10px #222;

    -webkit-box-shadow:0px 0px 10px #222;

    box-shadow:0px 0px 10px #222;

}

img.bg{

    position:absolute;

    top:0px;

    left:0px;

}

.rotator ul{

    list-style:none;

    position:absolute;

    right:0px;

    top:0px;

    margin-top:6px;

    z-index:999999;

}

.rotator ul li{

    display:block;

    float:left;

    clear:both;

    width:260px;

}

.rotator ul li a{

    width:230px;

    height:52px;

    float:right;

    clear:both;

    padding-left:10px;

    text-decoration:none;

    display:block;

    line-height:52px;

    background-color:#222;

    margin:1px -20px 1px 0px;

    opacity:0.7;

    color:#f0f0f0;

    font-size:20px;

    border:2px solid #000;

    border-right:none;

    outline:none;

    text-shadow:-1px 1px 1px #000;

    -moz-border-radius:10px 0px 0px 20px;

    -webkit-border-top-left-radius:10px;

    -webkit-border-bottom-left-radius:20px;

    border-top-left-radius:10px;

    border-bottom-left-radius:20px;

}

.rotator ul li a:hover{

      text-shadow:0px 0px 2px #fff;

}

.rotator .heading{

    position:absolute;

    top:0px;

    left:0px;

    width:500px;

}

.rotator .heading h1{

    text-shadow:-1px 1px 1px #555;

    font-weight:normal;

    font-size:46px;

    padding:20px;

}

.rotator .description{

    width:500px;

    height:80px;

    position:absolute;

    bottom:0px;

    left:0px;

    padding:20px;

    background-color:#222;

    -moz-border-radius:0px 10px 0px 0px;

    -webkit-border-top-right-radius:10px;

    border-top-right-radius:10px;

    opacity:0.7;

    border-top:2px solid #000;

    border-right:2px solid #000;

}

.rotator .description p{

    text-shadow:-1px 1px 1px #000;

    text-transform:none;

    letter-spacing:normal;

    line-height:26px;

}

a.more{

    color:orange;

    text-decoration:none;

    text-transform:uppercase;

    font-size:10px;

}

a.more:hover{

    color:#fff;

}

$(function() {

    /* the index of the current list element */

    var current = 1;

    /* function to iterate through all the list elements */

    var iterate = function(){

        var i = parseInt(current+1);

        var lis = $('#rotmenu').children('li').size();

        if(i>lis) i = 1;

        display($('#rotmenu li:nth-child('+i+')'));

    }

    /* Initially display the first one */

    display($('#rotmenu li:first'));

    /* In intervals of 3 seconds jump to the next element */

    var slidetime = setInterval(iterate,3000);

    /* if the User clicks on one list item, the auto slider stops */

    $('#rotmenu li').bind('click',function(e){

        clearTimeout(slidetime);

        display($(this));

        e.preventDefault();

    });

    /* displays each element associated to the "elem" list element */

    function display(elem){

        var $this   = elem;

        var repeat  = false;

        if(current == parseInt($this.index() + 1))

            repeat = true;

        /* slide in the current one */

        if(!repeat)

            $this.parent()

                 .find('li:nth-child('+current+') a')

                 .stop(true,true)

                 .animate({'marginRight':'-20px'},300,function(){

                $(this).animate({'opacity':'0.7'},700);

            });

        current = parseInt($this.index() + 1);

        var elem = $('a',$this);

        /* slide out the clicked or next one */

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

        /* the heading and description will slide out, change the content and slide back in */

        var info_elem = elem.next();

        $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){

            $('h1',$(this)).html(info_elem.find('.info_heading').html());

            $(this).animate({'left':'0px'},400,'easeInOutQuad');

        });

        $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){

            $('p',$(this)).html(info_elem.find('.info_description').html());

            $(this).animate({'bottom':'0px'},400,'easeInOutQuad');

        })

        /* the image will fade out and another will fade in */

        $('#rot1').prepend(

        $('<img alt="">',{

            style   :   'opacity:0',

            className : 'bg'

        }).load(

        function(){

            $(this).animate({'opacity':'1'},600);

            $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){

                $(this).remove();

            });

        }

    ).attr('src','images/'+info_elem.find('.info_image').html())

     .attr('width','800')

     .attr('height','300')

    );

    }

});