Javascript 如何使用jQuery执行代码单击箭头/更改图像单击箭头

我有一个代码，可以在单击时更改图像。它还会更改当前选定图像的边框颜色。我很高兴，它工作得很好，但我想添加箭头来在下一个和上一个图像之间导航

jQuery

  $(document).ready(function(){
    $('li.switch img, li.switch1 img').click(function() {
      var current = this;
      var elements = $("#w2s, #swap, #swap2");
      var src = this.src;
    $(elements).css("border", "3px solid #fff");
    $(current).css("border", "3px solid  #000");
    $("#w1s").fadeOut(400, function(){
      $(this).fadeIn(400)[0].src = src; 
    });
  });
});

HTML

我怎样才能做到？我可以转换这个代码来实现它吗？或者对于这个问题有完全不同的解决方案吗

#w2s、#swap、#swap2

是位于顶部主照片下方的图像，id

w1s

JSFIDLE 下面是它的工作原理

---

你能把html和你想做的任何事情都包括进去吗？这里是@depperm。我也应该包括CSS吗？一个代码片段或bin会更好。为什么你不能使用插件呢？嗯，我真的很想使用插件，但我不知道怎么做。你能告诉我什么是插件@MoshFeu吗？让谷歌回答你：。幻灯片放映插件示例：

   <div class="bottlesWrapper">
    <img src="right.png" id="right">
    <img src="left.png" id="left">
  <div class="thumbs">
    <img src="pallets.jpg" id="w1s">
  </div>

  <ul class="switchPhoto">
   <li class="switch1">
   <img src="pallets.jpg" id="w2s">
  </li>

  <li class="switch">
   <img src="prod.jpg" id="swap">
  </li>

  <li class="switch">
      <img src="modernhome.jpg" id="swap2">
  </li>
  </ul>
  </div>