<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")
});
});