beta-it,
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style type='text/css'>
*{
margin: 0;
padding: 0;
}
#slider-wrap { /* Оболочка слайдера и кнопок */
width:100%;
height: 100%;
}
#slider { /* Оболочка слайдера */
width:100%;
height:200px;
overflow: hidden;
position:relative;
}
.slide { /* Слайд */
width:100%;
height:100%;
display: none;
position: relative;
top: 0px;
}
.sl1 {
position: relative;
left:-100%;
margin: -50% auto;
background:black;
width: 100px;
top:50px;
height:100px;
}
</style>
<script>
$(function() {
var slides = $('.slide') ,len = slides.length, n = len-1;
function rotator()
{
var slide = slides.eq(n);
slide.hide();
n = ++n % len;
slide = slides.eq(n);
slide.show();
var sl1 = $('.sl1', slide);
sl1.css({left:'-100%'}).animate({left : '0%'}, 1000).delay(1000).animate({left : '100%'}, 1000, rotator);
}
rotator()
});
</script>
</head>
<body>
<section id="slider-wrap">
<div id="slider">
<div class="slide active" style="background: red; background-position: 50% 0%; background-repeat: repeat no-repeat;">
<div class="sl1" style="color: white">11111</div>
</div>
<div class="slide" style="background:blue; background-position: 50% 0%; background-repeat: repeat no-repeat;">
<div class="sl1" style="background: white;">22222</div>
</div>
<div class="slide" style="background:yellow; background-position: 50% 0%; background-repeat: repeat no-repeat;">
<div class="sl1" style="background: green;">33333</div>
</div>
</div>
</section>
</body>
</html>
