点击左右箭头轮播-24 

 1 <style>
 2 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:'\5FAE\8F6F\96C5\9ED1','Hiragino Sans GB','\5B8B\4F53',sans-serif;}
 3 em,i{font-style:normal;}
 4 img{border:0;vertical-align:top;}
 5 ul,li{list-style:none;}
 6 body{ font-family:'\5FAE\8F6F\96C5\9ED1','Hiragino Sans GB','\5B8B\4F53',sans-serif;font-size:12px;background:#FFF;}
 7 a{text-decoration:none;}
 8 a:active{noOutline:expression(this.onFocus=this.blur());}
 9 a:focus{outline:none;-moz-outline:none;}
10 a:visited { color:#F00;} 
11 table{ width:100%; width:100% !important;}
12 .cl:after{content:'\20';display:block;height:0;clear:both;}
13 .cl{clear:both;*zoom:1;}
14 .text{font-family:'\5FAE\8F6F\96C5\9ED1','Hiragino Sans GB','\5B8B\4F53',sans-serif;}
15 
16 .w1190{ width:1190px; margin:0 auto;}
17 
18 
19 .left_box{ width:680px; margin:200px auto;}
20 .right_box{ width:300px; float:right; margin-top:20px;}
21 .left_box ul li{ float:left; margin-left:10px;}
22 .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;}
23 .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;}
24 .tt_box{ width:610px; float:left; overflow:hidden;}
25 .tt_box .ul_w{ width:2000px;}
26 
27 </style>
28 
29 <div class="left_box">
30         
31           
32            <p class="p_left"></p>
33             <div class="tt_box">
34                     <ul class="ul_w">
35                          <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
36                          <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
37                          <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
38                          <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
39                          <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
40                          <li><a href="#" target="_blank"><img src="https://b2b.hc360.com/2019/images/img1.jpg" width="140" height="160"></a></li>
41                     </ul>
42             </div>
43             <p class="p_right"></p>
44             
45 
46 </div>
47 
48 
49 <script src="https://b2b.hc360.com/2019/js/jquery-1.10.2.min.js"></script>
50 <script>
51 
52 $(document).ready(function(){
53     
54         //点击效果
55         var num=0;
56         var ww=$('.ul_w li').outerWidth(true);
57         var li_length=$('.ul_w li').length;
58      // $('.num_i b').text(li_length);  
59    
60    $('.p_left').click(function(){
61            $('.ul_w').animate({'marginLeft':-ww},500,function(){
62              var firstli=$( ".tul_w li:first" );
63                  firstli.appendTo( ".ul_w" );
64                  $( ".ul_w" ).css({"marginLeft":0});
65            });
66      });
67   
68          $('.p_right').click(function(){
69               var lastli=$( ".ul_w li:last" );
70                   lastli.prependTo( ".ul_w" );
71                   $( ".ul_w" ).css({"marginLeft":-ww});
72                   $('.ul_w').animate({'marginLeft':0},500);
73                 
74            });
75     
76 });
77 
78 </script>
79 <!--------------如有修改请新建css以免覆盖，或不明白联系QQ：2601610816---苏-------->

 

posted @ 2019-11-25 16:09  南瓜小园  阅读(229)  评论(0)  编辑  收藏  举报