alex72bel,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.rotating-content
{
height:215px;
}
.rotating-content span
{
overflow:hidden;
padding:0;
position:absolute;
opacity: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$elements = $('.rotating-content').find('span');
var $next = $elements.first();
function fn() {
$next.fadeTo(1200,1).delay(9000).fadeTo(1200,0,fn);;
$next = $next.next();
if ($next.length === 0) {
$next = $elements.first();
}
}
fn()
})
</script>
</head>
<body>
<div class="rotating-content">
<span style="background-color:#FFFF00">БЛОК 1</span>
<span style="background-color:#FF00FF">БЛОК 2</span>
<span style="background-color:#D2691E">БЛОК 3</span>
</div>
</body>
</html>