[Deff]

<style type="text/css">
div[class^="medium-slide-"]{
 display:none; 
}
div.medium-slide-1{
 display:block; 
}
.switch li{
 cursor:pointer;
}
</style>


<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('li[class^="sl-"]').click(function(){

		var liClass = $(this).attr('class').replace(/^([^\s]+).*$/ig,"$1");
		var num = liClass.replace("sl-","");
		$(this).parent().find("li a").removeClass('selected');
		$(this).find("a").addClass('selected');

		$('div[class^="medium-slide-"]').not('div.medium-slide-'+num).hide();
		$('div.medium-slide-'+num).show();

	});
});

</script>



<div class="medium-slider-wrap">
    <div class="medium-slide-1">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>
    <div class="medium-slide-2">
        <a href="#"><img src="images/logo-1.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo1"></a>
    </div> 
    <div class="medium-slide-3">
        <a href="#"><img src="images/logo-1.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo2"></a>
    </div> 
    <div class="medium-slide-4">
        <a href="#"><img src="images/logo-1.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo3"></a>
    </div>     
</div>
<div class="switch">
    <ul>
        <li class="sl-1"><a class="selected">1</a></li>
        <li class="sl-2"><a>2</a></li>
        <li class="sl-3"><a>3</a></li>
        <li class="sl-4"><a>4</a></li>
    </ul>
</div>

C .hide( "slide",{ direction: "left" }, 500 ); и .show( "slide",{ direction: "right" }, 500 ); - разбирайтесь сами
ибо обычно делаю через animate()