Eva Savel,
надеюсь разберётесь ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span {
margin: 8px
}
img {
height: 300px;
}
li, span{
cursor: pointer;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var content = document.querySelector('.content'),
pictures = {hand : ["http://www.greveniotis.gr/images/stories/logos/arthrografia1.jpg", "http://cdn01.ru/files/users/images/66/f8/66f81f19420a1351d38afdd67950ff24.jpg", "http://www.mikymauz.estranky.cz/img/portrait.1.1385066842.jpeg"],
sketch : ["http://cs309317.vk.me/v309317608/1662/mGnqKzd2LJ8.jpg", "https://cdn2.f-cdn.com/contestentries/89046/11683392/53c7a04ad21b4_thumb.jpg"],
artwork : [],
certificate : []},
arr = pictures.hand,
img = document.querySelector('#slider'),
index = 0,
src;
content.addEventListener("click", function(event) {
var el = event.target;
if ("LI" == el.tagName) {
arr = pictures[el.dataset.arr];
index = 0;
}
else if(el.classList.contains("prev")) index--;
else if(el.classList.contains("next")) index++;
if(index >= arr.length) index = 0;
if(index < 0) index = arr.length-1;
if(src=arr[index]) img.src = src;
});
});
</script>
</head>
<body>
<div class="content">
<ul class="menu">
<li data-arr="hand">От руки</li>
<li data-arr="sketch" >Зарисовки</li>
<li data-arr="artwork">3</li>
<li data-arr="certificate">4</li>
</ul>
<img src="http://www.greveniotis.gr/images/stories/logos/arthrografia1.jpg" alt="" id="slider">
<span class="prev">prev</span><span class="next">next</span>
</div>
</body>
</html>