html:
<form id="slider" data-min="1" data-max="3">
<div class="tab_img">
<span class="prev" data-type="3" onclick="ChangeType($(this).data('type'));">назад</span>
<img class="img" src="type_1.png" height="50" width = "50"/>
<span class="next" data-type="2" onclick="ChangeType($(this).data('type'));">вперёд</span>
</div>
<div class="tabs_info">
<div class="type_1 select" data-type="1" onclick="ChangeType($(this).data('type'));">type_1</div>
<div class="type_2" data-type="2" onclick="ChangeType($(this).data('type'));">type_2</div>
<div class="type_3" data-type="3" onclick="ChangeType($(this).data('type'));">type_3</div>
</div>
<input type="hidden" name="type" value="1"/>
<input type="submit" value="Подробнее"/>
</form>
js(jquery):
ChangeType = function(numb) {
$('.img').attr('src', 'type_'+numb.toString());
$('.tabs_info').children().removeClass('select');
$('.type_'+numb.toString()).addClass('select');
$('input[name="type"]').val(numb);
var sl_max = $('#slider').data('max'),
sl_min = $('#slider').data('min');
if($('.prev').data('type')==sl_min) {
$('.prev').data('type',sl_max);
} else { $('.prev').data('type',($('.prev').data('type')-1)) }
if($('.next').data('type')==sl_max) {
$('.next').data('type',sl_min);
} else { $('.next').data('type',($('.next').data('type')+1)) }
}
вот