Carousel - Форум

<script type="text/javascript" src="jquery-1.4.2.js"></script>

body{margin:0}
.car img{cursor:pointer}
.car{list-style:none;margin-left:100px;padding:0}
.car li{position:absolute;height:130px;width:100px;}
.back{margin:0 0 0 15px;opacity:.3;z-index:1}
.left{margin:20px 0 0 -100px;opacity:.6;z-index:2}
.right{margin:20px 0 0 120px;opacity:.6;z-index:3}
.front{margin:40px 0 0 10px;z-index:4}
.back img{height:78px;width:60px;}
.left img{height:104px;width:80px;}
.right img{height:104px;width:80px;}
.front img{height:130px;width:100px;}
.links{position:absolute;z-index:5;margin:180px 0 0 125px}
.links a{text-decoration:none;color:#AAA; text-shadow:1px 1px 1px #FFF;font-size:20px;font-weight:bold;display:inline-block;border:1px solid #AAA;width:30px;height:30px;line-height:30px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#DDD}

<div align="center">
<ul class="car">
<li class="back" id="1"><img border="0" src="img/1.png"></li>
<li class="left" id="2"><img border="0" src="img/2.png"></li>
<li class="right" id="3"><img border="0" src="img/3.png"></li>
<li class="front" id="4"><img border="0" src="img/4.png"></li>
</ul>
<div class="links">
<a href="javascript://" class="lArr">«</a>
<a href="javascript://" class="rArr">»</a>
</div>
</div>

jQuery(function(){
$('.rArr').click(function(){
$('.right').animate({marginLeft:'15px',marginTop:'0',opacity:.3},500).css('z-index','1').f   ind('img').animate({height:'78px',width:'60px'},500,function(){$('#3').addClass('back').removeClass('right')});
$('.back').attr('id', '1');
$('.front').animate({marginLeft:'120px',marginTop:'20px',opacity:.6},500).css('z-index','3').find('img').animate({height:'104px',width:'80   px'},500,function(){$('#4').addClass('right').removeClass('front')});
$('.right').attr('id', '3');
$('.left').animate({marginLeft:'10px',marginTop:'40px',opacity:1},500).css('z-index','4').find('img').animate({height:'130px',width:'100px   '},500,function(){$('#2').addClass('front').removeClass('left')});
$('.front').attr('id', '4');
$('.back').animate({marginLeft:'-100px',marginTop:'20px',opacity:.6},500).css('z-index','2').find('img').animate({height:'104px',width:'80   px'},500,function(){$('#1').addClass('left').removeClass('back')});
$('.left').attr('id', '2');
});
$('.lArr').click(function(){
$('.right').animate({marginLeft:'10px',marginTop:'40px',opacity:1},500).css('z-index','4').find('img').anima   te({height:'130px',width:'100px'},500,function(){$('#3').addClass('front').removeClass('right')})
$('.front').attr('id', '4')
$('.front').animate({marginLeft:'-100px',marginTop:'20px',opacity:.6},500).css('z-index','3').find('img').animate({height:'104px',widt   h:'80px'},500,function(){$('#4').addClass('left').removeClass('front')})
$('.left').attr('id', '2')
$('.left').animate({marginLeft:'15px',marginTop:'0',opacity:.3},500).css('z-index','1').find('img').animate({height:'78px',width:'60px   '},500,function(){$('#2').addClass('back').removeClass('left')})
$('.back').attr('id', '1')
$('.back').animate({marginLeft:'120px',marginTop:'20px',opacity:.6},500).css('z-index','2').find('img').animate({height:'104px',width:   '80px'},500,function(){$('#1').addClass('right').removeClass('back')})
$('.right').attr('id', '3')
});
});