首页 > 代码库 > 响应式图片菜单式轮播，兼容手机，平板，PC
响应式图片菜单式轮播，兼容手机，平板，PC
昨天在给自己用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 else24 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>
响应式图片菜单式轮播，兼容手机，平板，PC
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。