点击左右箭头轮播-24

<style>
body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,input,button,textarea,form,th,td,tr,p,span,img,b,i,em,strong,a{margin:0;padding:0;border:0;font-family:'5FAE8F6F96C59ED1','Hiragino Sans GB','5B8B4F53',sans-serif;}
em,i{font-style:normal;}
img{border:0;vertical-align:top;}
ul,li{list-style:none;}
body{ font-family:'5FAE8F6F96C59ED1','Hiragino Sans GB','5B8B4F53',sans-serif;font-size:12px;background:#FFF;}
a{text-decoration:none;}
a:active{noOutline:expression(this.onFocus=this.blur());}
a:focus{outline:none;-moz-outline:none;}
a:visited { color:#F00;} 
table{ width:100%; width:100% !important;}
.cl:after{content:'20';display:block;height:0;clear:both;}
.cl{clear:both;*zoom:1;}
.text{font-family:'5FAE8F6F96C59ED1','Hiragino Sans GB','5B8B4F53',sans-serif;}

.w1190{ width:1190px; margin:0 auto;}


.left_box{ width:680px; margin:200px auto;}
.right_box{ width:300px; float:right; margin-top:20px;}
.left_box ul li{ float:left; margin-left:10px;}
.p_left{ background:url(https://b2b.hc360.com/2019/images/left_btn.png) no-repeat; width:20px; height:38px; float:left; margin:60px 15px 0 0; cursor:pointer;}
.p_right{ background:url(https://b2b.hc360.com/2019/images/right_btn.png) no-repeat; width:20px; height:38px; float:left; margin:60px 0 0 15px; cursor:pointer;}
.tt_box{ width:610px; float:left; overflow:hidden;}
.tt_box .ul_w{ width:2000px;}

</style>

<div class="left_box">
        
          
           <p class="p_left"></p>
            <div class="tt_box">
                    <ul class="ul_w">
                         <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
                         <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
                         <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
                         <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
                         <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
                         <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
                    </ul>
            </div>
            <p class="p_right"></p>
            

</div>


<script src="https://b2b.hc360.com/2019/js/jquery-1.10.2.min.js"></script>
<script>

$(document).ready(function(){
    
        //点击效果
        var num=0;
        var ww=$('.ul_w li').outerWidth(true);
        var li_length=$('.ul_w li').length;
     // $('.num_i b').text(li_length);  
   
   $('.p_left').click(function(){
           $('.ul_w').animate({'marginLeft':-ww},500,function(){
             var firstli=$( ".tul_w li:first" );
                 firstli.appendTo( ".ul_w" );
                 $( ".ul_w" ).css({"marginLeft":0});
           });
     });
  
         $('.p_right').click(function(){
              var lastli=$( ".ul_w li:last" );
                  lastli.prependTo( ".ul_w" );
                  $( ".ul_w" ).css({"marginLeft":-ww});
                  $('.ul_w').animate({'marginLeft':0},500);
                
           });
    
});

</script>
<!--------------如有修改请新建css以免覆盖，或不明白联系QQ：2601610816---苏-------->