点击左右滚动轮播-09

<div class="hot w1190 cl">
      <p class="left_btn"></p>
           <div class="tu_box">
            
                        <div class="tu_box1">
                        
                                 <ul class="tu_1">
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                           
                                          
                                          
                                      </li>
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                           
                                          
                                      </li>
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                          
                                      </li>
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                          
                                      </li>
                                     
                                 </ul>
                                  
                                 <ul class="tu_1">
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                          
                                      </li>
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                          
                                      </li>
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                          
                                      </li>
                                      <li>
                                           <p class="pp1"><a href="#" target="_blank"><img src="http://www.hc360.com/dx/zt/2015/0604/images/tu1.jpg" width="198" height="198"></a></p>
                                           <p class="pp2"><span><a href="#" target="_blank"><img src="images/a2.jpg" width="72" height="23"></a></span><a href="#" target="_blank">精密有木有缝纫机</a></p><p class="cxj">促销价：￥199.00</p>
                                          
                                      </li>
                                     
                                 </ul>
                                 
                         </div>
                
           </div>
            
      <p class="right_btn"></p>
</div>

.hot{ clear:both; height:240px; margin-top:30px;}

.hot .left_btn{ float:left; background:url(../images/but1.png) no-repeat; 62px; height:90px; margin:66px 0 0 30px;cursor:pointer;}
.hot .left_btn1{background:url(../images/but3.png) no-repeat; 62px; height:90px;}
.hot .right_btn{ float:left; background:url(../images/but2.png) no-repeat; 62px; height:90px; margin:66px 0 0 40px; cursor:pointer;}
.hot .right_btn1{ background:url(../images/but4.png) no-repeat; 62px; height:90px;}
.hot ul.tu_1 li{ float:left; 198px; height:238px; margin:0 15px; position:relative; *position:static;}
.hot ul.tu_1 li .pp1{ 198px; height:198px; border:1px #cfcfcf solid; margin-bottom:10px;}
.hot ul.tu_1 li .pp2{ line-height:22px;}
.hot ul.tu_1 li .pp2 span{ float:right;}
.hot ul.tu_1 li .pp2 a{ text-decoration:none; color:#444444;}
.hot ul.tu_1 li .pp2 a:hover{ text-decoration:underline;}
.hot ul.tu_1 li .cxj{ position:absolute; left:0; top:0; 120px; height:20px; text-align:center; line-height:20px; color:#FFF; background:#E25B00;font-family:'5FAE8F6F96C59ED1','Hiragino Sans GB','5B8B4F53',sans-serif;}


.tu_box{ float:left; 920px; height:240px; margin-left:50px; margin-bottom:20px; overflow:hidden;}
.tu_box1{ 6000px; clear:both;}
.tu_box1 ul.tu_1{ float:left; 920px; height:240px;}

$(document).ready(function(){
    
    
    //点击效果
        var num=0;
        var ww=$('.tu_box1 ul').outerWidth(true);
        var li_length=$('.tu_box1 ul').length;
     // $('.num_i b').text(li_length);  
   
   $('.left_btn').click(function(){
           $('.tu_box1').animate({'marginLeft':-ww},500,function(){
             var firstli=$( ".tu_box1 ul:first" );
                 firstli.appendTo( ".tu_box1" );
                 $( ".tu_box1" ).css({"marginLeft":0});
           });
     });
 
         $('.right_btn').click(function(){
              var lastli=$( ".tu_box1 ul:last" );
                  lastli.prependTo( ".tu_box1" );
                  $( ".tu_box1" ).css({"marginLeft":-ww});
                  $('.tu_box1').animate({'marginLeft':0},500);
                
           });
    
    $('.left_btn').hover(function(){
               $(this).addClass("left_btn1")
        },function(){
               $(this).removeClass("left_btn1")
    });
    $('.right_btn').hover(function(){
               $(this).addClass("right_btn1")
        },function(){
               $(this).removeClass("right_btn1")
    });
           
        
    
});