A CodePen by fengliu222.

index.html

<div id="main">
  <div id="slide">
    <ul>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
      <li><img src="http://pic.yupoo.com/zhenghong/CpEvg2Fi/small.jpg'" alt=""></li>
    </ul>
  </div>
</div>

script.js

$(function(){
  var slidewidth = ($('#slide ul li').length+1) * 240;
  var wy = 0;
  var slidebox = $("#slide");
  var ctx = 0;
  var cur = 0;
  slidebox.width(slidewidth);

  slidebox.bind({
    mousedown:function(e){
      e.stopPropagation();
      e.preventDefault();
      mouseposX = e.pageX;
      slidebox.css('cursor','move');
      ctx = $("#slide").position().left;
      e.stopPropagation();
      e.preventDefault();
      slidebox.bind({mouseover:function(e){

      }})
    },
   
    mouseup:function(e){
        slidebox.unbind('mousemove');
        slidebox.css('cursor','');
        cur = e.pageX;
        wy = cur -mouseposX;
         
        if(Math.abs(parseInt(wy))>30){
          if(wy>0){
            slidebox.animate({'left':ctx+240*3},function(){
              if($("#slide").position().left>0)
              {
                $("#slide").css("left",0);
              }
            });
          }
          else if(wy<0){   
            slidebox.animate({'left':ctx-240*3},function(){
              var ys = $('#slide ul li').length -( $('#slide ul li').length %3 );
              if($("#slide").position().left<(-$('#slide ul li').length+1)*240){
                $("#slide").css("left",-ys*240 + 'px');
                console.log(ys);
              }
            });
          }

         }
    },
  });
 });

style.css

body{margin:0;padding:0;}
#main{
  width:720px;
  overflow:hidden;
  position:relative;
}
#slide{
  height:300px;
  position:relative;
  left:0;top:0;  
}
#slide ul li{
  float:left;
  width:240px;
  list-style:none;
}