Zend FR

<div id="slideshow">    
      <span id="loading">Loading</span>
    
      <ul id="pictures">
        <li><div id="slide_1"  class="active" style="background-color:blue;width:437;height:277px;">dfgdfg</div></li>
        <li><div  id="slide_2"    style="background-color:yellow;width:437;height:277px;">pppp</div></li>
        <li><div  id="slide_3"   style="background-color:green;width:437;height:277px;">gmmmmm</div></li>
             <li><div  id="slide_4"   style="background-color:yellow;width:437;height:277px;">Wddddd</div></li>
              <li><div  id="slide_5"   style="background-color:purple;width:437;height:277px;">kkkkkkkkk</div></li>
               <li><div  id="slide_6"   style="background-color:white;width:437;height:277px;">uuuuuuuu</div></li>
      </ul>
      
      <ul id="menu">
        <li id="menu_1"><a   onclick="slideSwitch(1,6,1);">Melbourne</a></li>
        <li id="menu_2"><a    onclick="slideSwitch(2,6,1);">Buenos Aires</a></li>
        <li id="menu_3"><a     onclick="slideSwitch(3,6,1);">Urubamba</a></li>
        <li id="menu_4"><a     onclick="slideSwitch(4,6,1);">Urubamba</a></li>
        <li id="menu_5"><a     onclick="slideSwitch(5,6,1);">Urubamba</a></li>
        <li id="menu_6"><a     onclick="slideSwitch(6,6,1);">Urubamba</a></li>
      </ul>
    </div>
<script type="text/javascript">
    var depart;

function slideSwitch(deb,nb,clear) {
 
   if(clear==1){
  
      clearInterval (depart);
      
      //on va aussi enlever le current sur les menu 
      //on va regarde celle qui ets en current actuellement 
      for(i=1;i<=nb;i++){
      
       $("#menu_"+i).removeClass("current");
      $("#slide_"+i).removeClass('active last-active');
      }
      
      $("#slide_"+deb).addClass('active');
      
      
      
  }
 
    
 $("#menu_"+deb).addClass("current");
    var $debut=deb;
    var $fin=nb;
    var $position=$debut;
  

  
    depart=setInterval(function(){
    
         
        var $active = $('#slide_'+$position);
 $("#menu_"+$position).removeClass("current");
   // if ( $active.length == 0 ) $active = $('#pictures DIV:last');

    //var $next =  $active.next().length ? $active.next()
        //: $('#pictures DIV:first');
        
        $position+=1;
        if($position>$fin){
            $position=1;
        }
         //alert($position);
        var $next=$("#slide_"+$position);

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    
   
  $("#menu_"+$position).addClass("current");
          
    },5000);
   
   
}



$(function() {
slideSwitch(1,4,0);
   // setInterval( "slideSwitch(4)", 5000 );
});

</script>

/* CSS Document */
#slideshow * { margin: 0; padding: 0; }
#slideshow { background: url('images/bg_shadow.gif') no-repeat top; position: relative; padding: 14px 0 15px; width: 603px; height: 306px; }
#slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; }
#slideshow #loading { background: url('images/spinner.gif'); display: block; top: 158px; left: 205px; text-indent: -5000px; width: 24px; height: 24px; visibility: hidden; z-index: 5; }
#slideshow #pictures { background: url('images/bg.jpg'); width: 437px; height: 277px; left: 0; overflow: hidden; }
#slideshow #pictures li { display: block; position: absolute; top: 0; width: 437px; }
#slideshow #pictures li img { display: block; position: relative; bottom: 0; }
#slideshow #menu { background: url('images/bg_side.jpg'); list-style-type: none; width: 166px; height: 257px; right: 0; padding-top: 20px; }
#slideshow #menu li { display: block; z-index: 1000; position: relative; zoom: 1;z-index:11; }
#slideshow #menu li a { display: block; font: 11px "Lucida Grande", "Verdana"; text-decoration: none; padding: 7px 0 7px 28px; z-index: 1000; color: #ccc; line-height: 14px; vertical-align: middle; zoom: 1; }
#slideshow #menu li a:focus { outline: 0; }
#slideshow #menu li a:hover { color: #fff; background-color:#67acbb;}
#slideshow #menu li.current a { font: 15px "Georgia"; color: #fff; padding: 5px 0 5px 28px; line-height: 18px; background-color:#00c7f2;}
#slideshow #menu li.background { background: url('images/arrow.gif') no-repeat left center; position: absolute; font-size: 1px; height: 7px; width: 4px; z-index: 5; }



#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow DIV.active {
    z-index:10;
  
}

#slideshow DIV.last-active {
    z-index:9;

}