淘宝上传后有五个图片，但如何让每个图片可以向左移动或向右？

每个图片hover的时候就会弹出三个按钮效果 一个是左移，一个是右移，一个是删除。
删除的效果我已经写好了。

<ul class="upload inline-control">
    <li class="pic0">
        <img src="//192.168.0.3:8888/resource/image/1.jpg" id="cart-1">
            <div class="operate">
                <i class="toleft">左移</i>
                <i class="toright">右移</i>
                <i class="del" data-id="1">删除</i>
            </div>
    </li>
    <li class="pic1">
        <img src="//192.168.0.3:8888/resource/image/2.jpg" id="cart-2">
            <div class="operate">
                <i class="toleft">左移</i>
                <i class="toright">右移</i>
                <i class="del" data-id="2">删除</i>
            </div>
    </li>
    <li class="pic2">
        <img src="//192.168.0.3:8888/resource/image/3.jpg" id="cart-3">
            <div class="operate">
                <i class="toleft">左移</i>
                <i class="toright">右移</i>
                <i class="del" data-id="3">删除</i>
            </div>
    </li>
    <li class="pic3">
        <img src="//192.168.0.3:8888/resource/image/4.jpg" id="cart-4">
            <div class="operate">
                <i class="toleft">左移</i>
                <i class="toright">右移</i>
                <i class="del" data-id="4">删除</i>
            </div>        
    </li>
    <li class="pic4">
        <img src="//192.168.0.3:8888/resource/image/5.jpg" id="cart-5">
            <div class="operate">
                <i class="toleft">左移</i>
                <i class="toright">右移</i>
                <i class="del" data-id="5">删除</i>
            </div>    
    </li>
  </ul>

      $(".del").click(function(){
          $("#cart-"+$(this).data('id')).remove()
      });
      

下面就是左边按钮和右边按钮，没思路

 $(".toright").click(function(){
           //怎么写？ 
             
      });
     $(".toleft").click(function(){
           //insertBefore 也没用的！
      });`请输入代码`