dr.5y51em,
тоже самое с интуитивной тудемой сюдемой ))) и для любого количества блоков
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#bg {
background: #00FF00;
position: absolute;
overflow: hidden;
}
#show{
position: absolute;
overflow: hidden;
background: #FFFF00;
overflow: hidden;
}
._div{
border: 4px solid #000;
background: blue;
color: white;
text-align: center;
width: 700px;
height: 700px;
float: left;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = 4;//величина бордюра ._div
$('#bg').css({'width': $(window).width(),'height':$(window).height()});
$('#show').css('width', $('#bg').width()*$('div._div').length);
$('._div').css({'margin-left':($('#bg').width() - $('div._div').width())/2-b*2,
'margin-right':($('#bg').width() - $('div._div').width())/2 } );
$('._div').css('height', $(window).height()-b*2);
function go(n){
$('#show').animate({"left":n+"="+$('#bg').width()},1000);
}
$('._div').not(":first,:last").click( function(event){
if(event.pageX>$(window).width()/2){go("-")}
else {go("+")};});
$('._div:first').click(function(){go("-")});
$('._div:last').click( function(){go("+")});
});
</script>
</head>
<body>
<div id="bg">
<div id="show">
<div class="_div" id="div1">div 1</div>
<div class="_div" id="div2">div 2</div>
<div class="_div" id="div3">div 3</div>
<div class="_div" id="div4">div 4</div>
<div class="_div" id="div5">div 5</div>
<div class="_div" id="div6">div 6</div>
</div>
</div>
</body>
</html>