tanto39,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.big-img{
background: url(../images/loading_100x100.gif) center 150px no-repeat;
height: 350px;
}
.big-img img{
position: absolute;
z-index: 1;
}
.big-img, .big-img img{
width: 456px;
}
.prev-img{
position: relative;
float: left;
display: block;
width: 150px;
height: 113px;
border: 1px solid #0F0;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<script>
$(function() {
var a = $('.mini-images a'), bigImg = $('.big-img img'), indx = 0;
a.click(function(event) {
var indx = a.index(this)
bigImg.css({'z-index': '-1'} ).eq(indx).css({'z-index': '10'} );
event.preventDefault();
}).eq(indx).click();
});
</script>
</head>
<body>
<div class="slaider">
<div class="big-img">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg" alt="tachka1" title="tachka"/>
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg" alt="tachka1" title="tachka"/>
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-lg.jpg" alt="tachka1" title="tachka"/>
</div>
<div class="mini-images">
<div class="prev-img"><a href="images/tachka1.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg" alt="tachka1" title="tachka"/></a></div>
<div class="prev-img"><a href="images/tachka2.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" alt="tachka2" title="tachka2"/></a></div>
<div class="prev-img"><a href="images/tachka3.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg" alt="tachka3" title="tachka3"/></a></div>
</div>
</div>
</body>
</html>