Код:
<!-- DEMO -->
<!-- DEMO -->
<style>/* объява */
#slideShowContainer{
width:310px;
padding:120px 0;
height:250px;
position:relative;
z-index:1000;
margin-left:10px;
}
#slideShow{
position:absolute;
height:250px;
width:300px;
background-color:#fff;
margin:8px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 208px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('http://forumupload.ru/uploads/0007/e3/f7/64535-1.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{left:-22px;}
#previousLink:hover{ background-position:bottom left;}
a#nextLink{right:-32px;background-position:top right;}
#nextLink:hover{background-position:bottom right;}
</style>
<center>
<div id="slideShowContainer">
<div id="slideShow">
<div id="pictures">
<img src="http://forumupload.ru/uploads/0007/e3/f7/64525-1.png" alt="" />
<img src="http://forumupload.ru/uploads/0007/e3/f7/64525-2.png" alt="" />
<img src="http://forumupload.ru/uploads/0007/e3/f7/64525-3.png" alt="" />
<img src="http://forumupload.ru/uploads/0007/e3/f7/64525-4.png" alt="" />
<img src="http://forumupload.ru/uploads/0007/e3/f7/64525-5.png" alt="" />
<img src="http://forumupload.ru/uploads/0007/e3/f7/64526-1.png" alt="" />
<img src="http://forumupload.ru/uploads/0007/e3/f7/64526-2.png" alt="" />
</div>
</div>
<a id="previousLink" href="#">»</a>
<a id="nextLink" href="#">«</a>
</div></center>
<!-- галерейка -->
<script>
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('#pictures img').each(function() {
z++;
$(this).css('z-index', z);
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease =
1; }
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
$('#pictures img').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow',
function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
}
else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}
});
return false;
}
$('#previousLink').click(function() {
return swapFirstLast(false);
});
$('#nextLink').click(function() {
return swapFirstLast(true);
});
});
</script>
