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

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

  

  js源码

 $(document).ready(function(){

     var width = $(document.body).width();
var width10 = width * 83.33333333 /100; var width1 = width10 * 8.33333333 / 100 - 0.5;
var width8 = width10 * 66.66666667 /100; var num = 0; function slide(){
var class_li = new Array('.slideone', '.slidetwo', '.slidethree', '.slidefour', '.slidefive');
// var num = Math.floor( Math.random()*5 );
$(class_li[num]).animate({ width:width8 }, ''); class_li.splice(num, 1); for( var i =0; i<4 ; i++ ){
$(class_li[i]).animate({ width:width1 }, '');
}
if( num< 4 )
num++;
else
num = 0;
} var t = window.setInterval(slide, 2000); $(".slideone, .slidetwo, .slidethree, .slidefour, .slidefive").mouseenter(function(){
window.clearInterval(t);
$(this).animate({ width:width8 }, ''); $(this).siblings().animate({ width:width1 }, '');
}); $('ul').mouseleave(function(){
t = window.setInterval(slide, 2000);
}); });

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

  html源码

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

响应式图片菜单式轮播,兼容手机,平板,PC的更多相关文章

  1. 使用Bootstrap 3开发响应式网站实践02,轮播

    本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...

  2. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  3. java 企业站源码 兼容手机平板PC 自适应响应式 SSM主流框架 freemaker 静态引擎

    前台: 支持四套模版, 可以在后台切换   系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以 ...

  4. java 网站源码 六套模版 兼容手机平板PC freemaker 静态引擎 在线编辑模版

    官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的ht ...

  5. java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

    前台: 支持四套模版, 可以在后台切换   系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以 ...

  6. iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

    iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43      阅读:630      评论:0      收藏:0   ...

  7. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

  8. css3响应式图片

    响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费. 同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片.   常用的实现方式: 1.用srcset和size ...

  9. iOS:实现图片的无限轮播---之使用第三方库SDCycleScrollView

    SDCycleScrollView API // //  SDCycleScrollView.h //  SDCycleScrollView #import <UIKit/UIKit.h> ...

随机推荐

  1. 小白解决CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6

    刚入手的MacBook想着学点东西,本汪还是决定玩玩CentOS服务器,安装好了VirtualBox + CentOS. 打开一看,懵逼了!命令行! 行吧,先装个图形界面: $sudo yum gro ...

  2. windows环境redis主从安装部署

    准备工作 下载windows环境redis,我下载的是2.4.5,解压,拷贝一主(master)两从(slaveof).主机端口使用6379,两从的端口分别为6380和6381, 我本地索性用6379 ...

  3. C#反序列化XML异常:在 XML文档(0, 0)中有一个错误“缺少根元素”

    Q: 在反序列化 Xml 字符串为 Xml 对象时,抛出如下异常. 即在 XML文档(0, 0)中有一个错误:缺少根元素. A: 首先看下代码: StringBuilder sb = new Stri ...

  4. C# 泛型

    C# 泛型 1.定义泛型类 在类定义中包含尖括号语法,即可创建泛型类: class MyGenericClass<T> { //Add code } 其中T可以遵循C#命名规则的任意字符. ...

  5. EC笔记:第4部分:21、必须返回对象时,别返回引用

    使用应用可以大幅减少构造函数与析构函数的调用次数,但是引用不可以滥用. 如下: struct St { int a; }; St &func(){ St t; return t; } 在返回t ...

  6. 【JS基础】正则表达式

    正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z ...

  7. 和我一起看API(一)你所不知道的LinearLayout补充

    楼主英语水平差,翻译的不好的话请多多指正,嘿嘿... A Layout that arranges its children in a single column or a single row. T ...

  8. SQL SERVER导入数据到ORACLE的方法总结

    我们偶尔会有将数据从SQL SERVER导入到ORACLE当中的这种需求,那么这种跨数据库导数有那些方法呢?这些方法又有那些利弊呢? 下面比较肤浅的总结了一些可行的方法. 1:生成SQL脚本然后去OR ...

  9. 算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!

    算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!

  10. 分享一款自己改进的皮肤“verdant”.

    - -!我总觉得我不应该这个样子了,这是个不好的习惯,面对博客,我每周或者每个月都会有审美疲劳,然后又写一个皮肤模板,不停的循环,至今都写了好多好多了,都记不清了,汗... 下面是我这今天审美疲劳写的 ...