This may be a better way to structure your javascript/jQuery code.
Below example uses the jQuery "begins with" selector to, first, select and hide all elements whose class name begins with "link" before displaying the desired selector. Less code.
Also, we use ternary syntax to say:
IF currLink
is 4, then make it 1; otherwise, increment it.
var currLink = 1;
$('.link2Btn').hide();
$('.link3Btn').hide();
$('.link4Btn').hide();
/* This is the right side */
$('#link2right').click(function(){
$('[class^=link]').fadeOut(); //use the "begins with" selector: ^=
if (currLink == 4) {
$('.link1Btn').fadeIn(500);
}else if (currLink == 3) {
$('.link4Btn').fadeIn(500);
}else if (currLink == 2) {
$('.link3Btn').fadeIn(500);
}else if (currLink == 1) {
$('.link2Btn').fadeIn(500);
}
(currLink==4)?currLink=1:currLink++;
});
$('#link4left').click(function(){
$('[class^=link]').fadeOut();
if (currLink == 4) {
$('.link3Btn').fadeIn(500);
}else if (currLink == 3) {
$('.link2Btn').fadeIn(500);
}else if (currLink == 2) {
$('.link1Btn').fadeIn(500);
}else if (currLink == 1) {
$('.link4Btn').fadeIn(500);
}
(currLink==1)?currLink=4:currLink--;
});