Dark19,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
width: 50px;
float: left;
}
.nav{
width: 100px;
}
span {
display: inline-block;
cursor: pointer;
height: 20px;
width: 20px;
background-color: #0066FF;
border-radius: 50%;
}
.on{
background-color: #FF3366;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".slider").each(function () { // обрабатываем каждый слайдер
var obj = $(this);
$(obj).append("<div class='nav'></div>");
$(obj).find("li").each(function () {
$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
$(this).addClass("slider"+$(this).index());
});
$(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
});
autoJS (0, $(".slider")[1])
});
function autoJS (obj, sl) { // slider function
var ul = $(sl).find("ul"); // находим блок
var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
var step = $(bl).width(); // ширина объекта
$(sl).find("span").removeClass("on").eq(obj).addClass("on")
$(ul).animate({marginLeft: "-"+step*obj}, obj ? 500 : 0, function() {
var len = ul.find("li").length
obj = ++obj % len;
window.setTimeout(function() {
autoJS (obj, sl)
}, 1000)
}); // 500 это скорость перемотки
}
function sliderJS (obj, sl) { // slider function
var ul = $(sl).find("ul"); // находим блок
var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
var step = $(bl).width(); // ширина объекта
$(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки
}
$(document).on("click", ".slider .nav span", function() { // slider click navigate
var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
$(sl).find("span").removeClass("on"); // убираем активный элемент
$(this).addClass("on"); // делаем активным текущий
var obj = $(this).attr("rel"); // узнаем его номер
sliderJS(obj, sl); // слайдим
return false;
});
</script>
</head>
<body>
<div class="slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
