jCarousel + animated hover menu

jCarousel + animated hover menu

hi I'm new

I'm trying to integrate jCorousel and animated hover menu found at http://www.webdesignerwall.com/demo/jquery/animated-hover1.html

can anyone help me out please. thanx in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Fade Method 2 (single image)</title>

    <script type="text/javascript" src="/js/jquery.js"></script>
      
   <script type="text/javascript" src="/jquery.jcarousel.pack.js"></script>
    <link rel="stylesheet" href="/css/jquery.jcarousel.css" type="text/css" />
   <link rel="stylesheet" href="/css/skin.css" type="text/css" />

<style type="text/css">
body {
   margin: 10px auto;
   font: 75%/120% Arial, Helvetica, sans-serif;
}

.menu {
   margin: 0px 0 0;
   padding: 0;
   list-style: none;
}
.menu li {
   padding: 0;
   margin: 0 2px;
   position: relative;
   text-align: center;
}
.menu a {
   padding: 0px 10px;
   display: block;
   color: #000000;
   width: 144px;
   text-decoration: none;
   font-weight: bold;
   background: url(images/button.gif) no-repeat center center;
}
.menu li em {
   background: url(images/hover.png) no-repeat;
   width: 180px;
   height: 45px;
   position: absolute;
   top: -85px;
   left: -15px;
   text-align: center;
   padding: 20px 12px 10px;
   font-style: normal;
   z-index: 2;
   display: none;
}
</style>


<script type="text/javascript">
$(document).ready(function(){

   $(".menu a").hover(function() {
      $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
   }, function() {
      $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
   });


});
</script>
   
    <script type="text/javascript">
   
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    });
   
    </script>
   


</head>
<body>
   



<div style="clear:both">       
        <ul id="mycarousel" class="jcarousel-skin-tango menu">                         

            <li>
                <a href=""><img src="images/thumbs/1.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/2.jpg" alt="Image 2" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/3.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/4.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/5.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/6.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/7.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/8.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/9.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/10.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/11.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/12.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/13.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/14.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>
            <li>
                <a href=""><img src="images/thumbs/15.jpg" alt="Image 3" /></a>
                <em>This is photo 1</em>
            </li>

        </ul>     
</div>

</body>
</html>