<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider {
width: 973px;
height: 383px;
float: left;
overflow: hidden;
position: relative;
}
#slider-uvel {
width: 2919px;
position: relative;
z-index: 54;
}
#big-strela1 {
height: 143px;
width: 96px;
z-index: 80;
position: absolute;
margin-top: 223px;
margin-left: 188px;
}
a:hover #big-strela1 {
background: url("images/big-strela1.png");
z-index: 80;
}
#big-strela2 {
height: 143px;
width: 96px;
z-index: 80;
position: absolute;
margin-top: 223px;
margin-left: 1066px;
}
a:hover #big-strela2 {
background: url("images/big-strela2.png");
z-index: 80;
}
#strela1 {
position: absolute;
margin-left: 206px;
margin-top: 270px;
z-index: 70;
}
#strela2 {
position: absolute;
margin-top: 270px;
margin-left: 1120px;
z-index: 70;
}
p{
height: 2000px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#big-strela2").click(function(event){event.stopPropagation();
event.preventDefault();
// при клике на правую кнопку запускаем следующую функцию:
$("#slider-uvel").animate({right: "-973px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
$("#slider-uvel .show-slaider").eq(0).clone().appendTo("#slider-uvel"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
$("#slider-uvel .show-slaider").eq(0).remove(); // удаляем первый элемент карусели
$("#slider-uvel").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}, 10);
});
$("#big-strela1").click(function(event){ event.stopPropagation();
event.preventDefault();
// при клике на левую кнопку выполняем следующую функцию:
$("#slider-uvel .show-slaider").eq(-1).clone().prependTo("#slider-uvel"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
$("#slider-uvel").css({"right":"-973px"}); // устанавливаем смещение набора -222px
$("#slider-uvel").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
$("#slider-uvel .show-slaider").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
});
function autoleft(){
$("#big-strela2").click();
timea=setTimeout(autoleft, 5000);
}
timea=setTimeout(autoleft, 5000);
$('#slider').on('mouseenter', function(){
clearTimeout(timea);
});
$('#slider').on('mouseleave', function(){
timea=setTimeout(autoleft, 5000);
});
});
</script>
</head>
<body>
<a href="#">
<div id="big-strela1"></div>
</a>
<a href="#">
<div id="big-strela2"></div>
</a>
<div id="content">
<div id="black-line1">
</div>
<div id="slider">
<div id="slider-uvel">
<div class="show-slaider">
<a href="#"><img src="http://javascript.ru/forum/images/smilies/stop.gif"></a>
</div>
<div class="show-slaider">
<a href="#"><img src="http://javascript.ru/forum/images/smilies/victory.gif"></a>
</div>
<div class="show-slaider">
<a href="#"><img src="http://javascript.ru/forum/images/smilies/wink.gif"></a>
</div>
</div>
</div>
</div> <p></p>
</body>
</html>