Code
* {
font-family: Arial, "Free Sans";
}
.container {
border: 5px solid #0099cc;
width: 700px;
overflow: hidden;
margin: 0 auto;
margin-top: 50px;
padding: 10px 0;
-webkit-border-radius: .3em .3em 0 0;
-moz-border-radius: .3em .3em 0 0;
border-radius: .3em .3em 0 0;
}
#container_wide {
width: 2800px;position: relative;
}
.product_container {
text-align: center;
width: 700px;
float: left;
position: relative;
}
.product_container a {
margin: 0 12px;
position: relative;
}
.nav {
width: 700px;
background: #0099cc;
margin: 0 auto;
text-align: center;
border: 5px solid #0099cc;
border-bottom-width: 10px;
-webkit-border-radius: 0 0 .3em .3em;
-moz-border-radius: 0 0 .3em .3em;
border-radius: 0 0 .3em .3em;
}
.nav a {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
margin-right: 10px;
font-weight: bold;
text-decoration: none;
}
.nav a:hover {
color: #e3e3e3;
}
Code
<div class="container">
<div id="container_wide">
<div class="product_container" id="product_browser">
<a href="#"><img src="img/browser/Chrome.png"></a>
<a href="#"><img src="img/browser/Safari.png"></a>
<a href="#"><img src="img/browser/Firefox.png"></a>
<a href="#"><img src="img/browser/IE.png"></a>
<a href="#"><img src="img/browser/Maxthon.png"></a>
<a href="#"><img src="img/browser/Opera.png"></a>
</div>
<div class="product_container" id="product_apple">
<a href="#"><img src="img/apple/iMac.png"></a>
<a href="#"><img src="img/apple/MacBook.png"></a>
<a href="#"><img src="img/apple/MacMini.png"></a>
<a href="#"><img src="img/apple/iPhone.png"></a>
<a href="#"><img src="img/apple/Macpro.png"></a>
</div>
<div class="product_container" id="product_construction">
<a href="#"><img src="img/construction/01.png"></a>
<a href="#"><img src="img/construction/02.png"></a>
<a href="#"><img src="img/construction/03.png"></a>
<a href="#"><img src="img/construction/04.png"></a>
</div>
<div class="product_container" id="product_cake">
<a href="#"><img src="img/cake/01.png"></a>
<a href="#"><img src="img/cake/02.png"></a>
<a href="#"><img src="img/cake/03.png"></a>
<a href="#"><img src="img/cake/04.png"></a>
<a href="#"><img src="img/cake/05.png"></a>
<a href="#"><img src="img/cake/06.png"></a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="nav">
<a href="#" class="product_nav" id="nav_browser">Браузер</a>
<a href="#" class="product_nav" id="nav_apple">Apple</a>
<a href="#" class="product_nav" id="nav_construction">Стройка</a>
<a href="#" class="product_nav" id="nav_cake">Пироги</a>
</div>
Code
<script>
$(document).ready(function() {
var displayed = "product_browser";
var cindex = 0; // Текущий индекс (выводимый раздел)
function loopMoveLeft(el, move) {
if (el.length == 1) {
setTimeout(function() {
el.animate({ left: move }, {
duration: 'slow',
easing: 'easeOutBounce'
});
loopMoveLeft(el.next(), move);
}, 100);
}
}
function loopMoveRight(el, move) {
if (el.length == 1) {
setTimeout(function() {
el.animate({ left: move }, {
duration: 'slow',
easing: 'easeOutBounce'
});
loopMoveRight(el.prev(), move);
}, 100);
}
}
function slideItem(obj_el) {
var product = $(obj_el).attr("id").replace("nav_", "");
var contid = 'product_' + product;
// Текущий отображаемый элемент
var elFirst = $("#"+displayed+" a:first-child");
var elLast = $("#"+displayed+" a:last-child");
var total_el = $("#"+displayed).children().length;
var index = $(obj_el).index();
// Новый элемент для вывода
var el_f = $("#"+contid+" a:first-child");
var el_l = $("#"+contid+" a:last-child");
var total_new = $("#"+contid).children().length;
var movement = -700 * index;
if (cindex > index) {
loopMoveRight(elLast, movement);
setTimeout(function() {
loopMoveRight(el_l, movement)
}, (total_el + 1) * 100);
} else if (cindex < index) {
loopMoveLeft(elFirst, movement);
setTimeout(function() {
loopMoveLeft(el_f, movement)
}, (total_el + 1) * 100);
}
cindex = index;
displayed = contid;
return (total_el + 5 + total_new) * 100;
}
var timeout;
$(".product_nav").click(function() {
$(".product_nav").unbind('click');
timeout = slideItem(this);
// Защита от дурака
setTimeout(function() {
$(".product_nav").bind('click', function() {
timeout = slideItem(this);
});
}, timeout);
});
});
</script>