var mycarousel_itemList = [
    {url: 'banner/1.png', title: '1'},
    {url: 'banner/2.png', title: '2'},
	{url: 'banner/3.png', title: '3'},
	{url: 'banner/4.png', title: '4'},
	{url: 'banner/5.png', title: '5'},
	{url: 'banner/6.png', title: '6'},
	{url: 'banner/7.png', title: '7'},
	{url: 'banner/8.png', title: '8'},
	{url: 'banner/9.png', title: '9'},
	{url: 'banner/10.png', title: '10'},
	{url: 'banner/11.png', title: '11'},
    {url: 'banner/12.png', title: '12'},
	{url: 'banner/13.png', title: '13'},
	{url: 'banner/14.png', title: '14'},
	{url: 'banner/15.png', title: '15'},
	{url: 'banner/16.png', title: '16'},
	{url: 'banner/17.png', title: '17'},
	{url: 'banner/18.png', title: '18'},
	{url: 'banner/19.png', title: '19'},
	{url: 'banner/20.png', title: '20'},
	{url: 'banner/21.png', title: '21'},
    {url: 'banner/22.png', title: '22'},
	{url: 'banner/23.png', title: '23'},
	{url: 'banner/24.png', title: '24'},
	{url: 'banner/25.png', title: '25'},
	{url: 'banner/26.png', title: '26'},
	{url: 'banner/27.png', title: '27'},
	{url: 'banner/28.png', title: '28'},
	{url: 'banner/29.png', title: '29'},
	{url: 'banner/30.png', title: '30'},
	{url: 'banner/31.png', title: '31'},
    {url: 'banner/32.png', title: '32'},
	{url: 'banner/33.png', title: '33'}
	
	
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    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);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<img class="carousel" src="' + item.url + '" width="180" height="85" alt="' + item.title + '" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});