<script type="text/javascript" src="carrusel/lib/jquery-1.2.3.pack.js"></script>

<script type="text/javascript" src="carrusel/lib/jquery.jcarousel.pack.js"></script>

<link rel="stylesheet" type="text/css" href="carrusel/lib/jquery.jcarousel.css" />

<link rel="stylesheet" type="text/css" href="carrusel/skins/ie7/skin.css" />

<script type="text/javascript">

var mycarousel_itemList = [
    {url: 'carrusel/viewer_ima/ima01.gif'},
    {url: 'carrusel/viewer_ima/ima04.gif', title: 'Game2'},
    {url: 'carrusel/viewer_ima/ima03.gif', title: 'Game3'},
    {url: 'carrusel/viewer_ima/ima02.gif', title: 'Game4'},
    {url: 'carrusel/viewer_ima/ima05.gif', title: 'Game5'},
    {url: 'carrusel/viewer_ima/ima06.gif', title: 'Game6'},
    {url: 'carrusel/viewer_ima/ima03.gif', title: 'Game7'},
    {url: 'carrusel/viewer_ima/ima04.gif', title: 'Game8'},
    {url: 'carrusel/viewer_ima/ima01.gif', title: 'Game9'},
    {url: 'carrusel/viewer_ima/ima05.gif', title: 'Game10'}
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
      var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="107" height="80" alt="' + '" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});

</script>