<script type="text/javascript"> 
 j = new Array('url1.jpg', 'url2.jpg', 'url3.jpg');
 cursor = 0

 function defilImg(position)
 {
 var k = document.getElementById('img_defil'); 
  switch(position)
  {
   case 1:
    if(cursor==0)
     cursor=j.length-1;
    else
     cursor--;
     
    k.src=j[cursor];
   break;
   case 2:
    if(cursor==j.length-1)
     cursor=0;
    else
     cursor++;
     
    k.src=j[cursor];
   break;
  }
  
 }
 </script>
 <style>
 a {color: green;}
 </style>
 
  <div style="width: 800px; margin: auto;">
   <div style="width: 100px; height: 300px;float: left; background-color: blue;">
    <a href="#" onclick="defilImg(1)">--------</a>
   </div>
   
   <div style="width: 100px; height: 300px;float: right; background-color: blue;">
    <a href="#" onclick="defilImg(2)">+++++++</a>
   </div>
   
   <div style="width: 700px; height: 300px; background-color: red;">
    <img id="img_defil" src="url1.jpg" style="height: 250px;" />
   </div>
  </div>