First of all you would need to do some css modifications, where the css would only allow 4 of the 20 items to be shown at a time.
#image-container { width: 800px; overflow: hidden; }
the above code is assuming the image container as the ID , and is assuming that each of the pictures is 200px wide. The overflow hide would then hide anything greater than the 800px , so only four images would show.
Secondly, you would want to use jQuery for the on click event and your code would look something like this..
$(document).ready(function(){
$('#next-button').click(function(){
$('img:first-child').animate({left: '-200px'}, 800);
});
});
You would have to set this up very precisely and requires a good deal of knowledge of html/css/and jquery. Or you could find a plug in to do most of the hard work for you. The above jQuery code is just an example and what you're trying to do would include at least 3-5 times the amount of jQuery than I posted.