Постоянно нахожусь в поиске простого, но эффективного слайдера. Здесь представлен один из вариантов.
Скрипт в подвал
<script type="text/javascript">
var slideWidth=330;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
sliderTimer=setInterval(nextSlide,4000);
$('.viewport').hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer=setInterval(nextSlide,4000);
});
});
function nextSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide++;
if(currentSlide>=$('.slidewrapper').children().size())
{
currentSlide=0;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},330).data('current',currentSlide);
}
</script>
CSS
/* Стили слайдера */
.viewport{
width: 330px;
height: 100px;
overflow: hidden;
position: relative;
float: left;
}
.slidewrapper{
position: absolute;
left: 0;
top: 0;
height: 100px;
margin: 0;
padding: 0;
}
.slide{
width: 330px;
height: 100px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
Код в сайт
<div class='viewport'>
<ul class='slidewrapper' data-current=0>
<li class='slide'>1</li>
<li class='slide'>2</li>
<li class='slide'>3</li>
</ul>
</div>
Пример работы
