昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js，看到了bootstrap里面的unslider.js，只有1.7k，很小，很兴奋，但使用到最后发现不兼容手机，当分辨率变化的时候不能够正常显示。于是决定自己写一个吧，有一次好像是在腾讯视频网看到了一个那种菜单栏目式的左右滑动轮播，挺好的，跟其他的不同。于是自己动手写了下。效果还行吧可以兼容手机的。

　　当鼠标放上去的时候会停止播放，同时把停留的菜单栏目展开，其他缩小。如下图所示：

　　

　　js源码

 1 $(document).ready(function(){
 2 
 3     var width = $(document.body).width();
 4     var width10 = width * 83.33333333 /100;
 5 
 6     var width1 = width10 * 8.33333333 / 100 - 0.5;
 7     var width8 = width10 * 66.66666667 /100;
 8 
 9     var num = 0;
10 
11     function slide(){
12         var class_li = new Array(\'.slideone\', \'.slidetwo\', \'.slidethree\', \'.slidefour\', \'.slidefive\');
13         // var num = Math.floor( Math.random()*5 );
14         $(class_li[num]).animate({ width:width8 }, \'\');
15 
16         class_li.splice(num, 1);
17 
18         for( var i =0; i<4 ; i++ ){
19             $(class_li[i]).animate({ width:width1 }, \'\');
20         }
21         if( num< 4 )
22             num++;
23         else
24             num = 0;
25     }
26 
27     var t = window.setInterval(slide, 2000);
28 
29     $(".slideone, .slidetwo, .slidethree, .slidefour, .slidefive").mouseenter(function(){
30         window.clearInterval(t);
31         $(this).animate({ width:width8 }, \'\');
32 
33         $(this).siblings().animate({ width:width1 }, \'\');
34     });
35 
36     $(\'ul\').mouseleave(function(){
37         t = window.setInterval(slide, 2000);
38     });
39 
40 });

　　因为bootstrap响应式的宽度是动态的，于是我先用jquery获取屏幕宽度，然后再分配每一个菜单栏目的宽度，还有需要展开的栏目的宽度。

　　html源码

 1         <div class="row">
 2             <div class="col-md-offset-1 col-md-10 slide col-xs-12" style="padding:0px;">
 3                 <ul>
 4                     <li class="col-md-8 slideone col-xs-8">一</li>
 5                     <li class="col-md-1 slidetwo col-xs-1">二</li>
 6                     <li class="col-md-1 slidethree col-xs-1">三</li>
 7                     <li class="col-md-1 slidefour col-xs-1">四</li>
 8                     <li class="col-md-1 slidefive col-xs-1">五</li>
 9                 </ul>
10             </div>
11         </div>

 

版权声明：本文为jhmydear原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jhmydear/p/4150698.html