infinite carousel
HTML
<div id="carousel-container">
<div id="carousel-inner">
<ul id="carousel-ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
CSS
#carousel-container {
width: 680px;
margin: 2em auto;
position: relative;
border: 1px solid #ccc;
overflow: hidden;
height: 250px;
}
#carousel-inner {
width: 680px;
float: left;
position: relative;
overflow: hidden;
}
#carousel-ul {
position:relative;
left:-160px;
list-style-type: none;
margin: 0px;
padding: 0px;
width:9999px;
padding-bottom:50px;
}
#carousel-ul li{
float: left;
width: 150px;
padding:0px;
height:186px;
margin: 50px 15px 0 15px;
position: relative;
background: #c0c0c0;
line-height: 186px;
font-size: 2em;
text-align: center;
}
JavaScript
var Carousel = {
timer :null,
wrapper: null,
init : function()
{
var self = this;
this.timer = setInterval(function(){self.sliding();}, 2000);
},
sliding : function() {
var item_width = $('#carousel-ul li').outerWidth() + 10;
var left_indent = parseInt($('#carousel-ul').css('left')) - item_width;
$('#carousel-ul:not(:animated)').animate({
'left': left_indent
}, 2000, 'linear', function() {
$('#carousel-ul li:last').after($('#carousel-ul li:first'));
$('#carousel-ul').css({
'left': '-160px'
});
})},
pause : function() {
clearInterval(this.timer);
this.timer = null;
},
resume : function() {
this.init();
},
};
$(function() {
alert("init");
Carousel.init();
$('#carousel-ul li').mouseover(function(){
//clearInterval(timer);
//timer = null;
//pause();
Carousel.pause();
});
$('#carousel-ul li').mouseout(function(){
//clearInterval(timer);
//timer = null;
//pause();
Carousel.resume();
});
});