Tutoriales en la Web

<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
 
<script type="text/javascript">
 
$.fn.infiniteCarousel = function () {
 
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
 
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            
 
        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }
 
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
 
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
 
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
 
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 
 
                currentPage = page;
            });                
 
            return false;
        }
 
        $wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
 
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);
        });
 
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
 
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });
};
 
$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>

body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 
 
.infiniteCarousel {
  width: 500px;
  position: relative;
}
 
.infiniteCarousel .wrapper {
  width: 420px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}
 
.infiniteCarousel ul a img {
  border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
 
.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}
 
.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 85px;
  width: 85px;
}
 
.infiniteCarousel ul li a img {
  display:block;
}
 
.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 37px;
	cursor: pointer;
	background-image: url(../imagenes/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
 
.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}
 
.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}
 
.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}
 
.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}
 
#carouselc {
	height: 500px;
	width: 500px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

<div class="carouselc" id="carouselc">
<h1>Infinite Carousel</h1>
 
<div class="Carousel Infinito">
  <div style="overflow: hidden;" class="wrapper">
    <ul>
      <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/3.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/4.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/5.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/6.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/7.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/8.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/9.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
          <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/10.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
        <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/12.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
 
        <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/13.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
    </ul>
      </div><a class="arrow back"><</a><a class="arrow forward">></a>
</div>
</div>