Organic Interfaces Web Design & Info Code

HTML

<div id="photos_rotator">
 <ul>
  <li>
   <a href="/node/15">
    <span class="title">003</span>
   </a>
   <div class="rotator_full"><img src="003_0.jpg" alt=""/></div>
  </li>
  <li>
   <a href="/node/14">
    <span class="title">002</span>
   </a>
   <div class="rotator_full"><img src="002_0.jpg" alt=""/></div>
  </li>
  <li>
   <a href="/node/13">
    <span class="title">001</span>
   </a>
   <div class="rotator_full"><img src="001_0.jpg" alt=""/></div>
  </li>
 </ul>
</div>

JavaScript

jQuery(function($){




    function processSlideshow( nextElem ){
        currentElem = $("#photos_rotator ul li.selected");
        if( !nextElem ){
            currentElemIndex = $("#photos_rotator ul li").index(currentElem);
            nextElem = $('#photos_rotator ul li').get(currentElemIndex+1);
            if( !nextElem ) nextElem = $("#photos_rotator ul li").get(0);
        }
        //fade out
        $(currentElem).removeClass("selected");
        $(currentElem).find(".rotator_full").css("left","-600px");
        setTimeout(function(){
            $(currentElem).find(".rotator_full").css("z-index","-2");
            $(currentElem).find(".rotator_full").css("left","600px");
        }, 700);
        //fade in
        $(nextElem).addClass("selected");
        $(nextElem).find(".rotator_full").css("z-index","-1");
        $(nextElem).find(".rotator_full").css("left","0");
    }

    if( $("#photos_rotator").length ){
        processSlideshow( $("#photos_rotator ul li").get(0) );
        setInterval(function(){ processSlideshow(); }, 6000);
        $("#photos_rotator ul li a").click(function(){
            processSlideshow( $(this).parent() );
            return false;
        });
    }




});

CSS

#photos_rotator{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 15px auto 0 auto;
    z-index: 0;
    overflow: hidden;
}
#photos_rotator ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 300px;
	padding: 370px 0 0 25px;
}
#photos_rotator ul:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
}
#photos_rotator ul li{
    float: left;
    width: 30px;
    height: 30px;
}
#photos_rotator ul li a{
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
}
#photos_rotator ul li.selected a{
    background-color: #2bd06a;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#photos_rotator ul li .rotator_full{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 600px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}