jq动画实现左右滑动

 <!DOCTYPE html>
 <html>
 <head>
     <title>jquery动画滑动</title>
     <style type="text/css">
         .list{
             border: 1px solid #b4b4b4;
             width: 450px;
             position: relative;
             height: 150px;
             overflow: hidden;
         }
         .box{
             position: absolute;
             width: 100%;
             font-size: 0;
             white-space:nowrap;
         }
         .div{
             padding: 10px;
             width: 130px;
             height: 130px;
             display: inline-block;
         }
         .div img{
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
         .next,.pre{
             cursor:pointer;
         }
     </style>
     <script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>
 </head>
 <body>
     <div class="list">
         <div class="box">
             <div class="div">
                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
             </div>
             <div class="div">
                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
             </div>
             <div class="div">
                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
             </div>
             <div class="div">
                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
             </div>
             <div class="div">
                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
             </div>
         </div>
     </div>
     <div>
         <span class="pre">上一个</span>
         <span class="next">下一个</span>
     </div>
     <script type="text/javascript">
         var ord = 0;
         function changeTo(ord){
             $(".list .box").stop(true,false).animate({ "left" : -ord*150},1000);
         }
         $(".pre").click(function (ev) {
             ord = ord > 0 ? --ord : $(".div").length -1;
             changeTo(ord);
         });
         $(".next").click(function (ev) {
             ord = ord < ($(".div").length-1)? ++ord : 0;
             changeTo(ord);
         });
     </script>
 </body>
 </html>