这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效。该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性。使用简单,界面美观大方。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" style="width: 100%" data-src=" " alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>
Example headline.</h1>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg" style="width: 100%" data-src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>
Another example headline.</h1>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/3.jpg" style="width: 100%" data-src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>
One more for good measure.</h1>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">
</span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>

via:http://www.w2bc.com/Article/39088

基于bootstrup3全屏宽度的响应式jQuery幻灯片特效的更多相关文章

  1. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  2. Gumby – 基于 Sass 的灵活的,响应式 CSS 框架

    Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...

  3. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  4. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  5. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  6. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  7. 全屏背景:15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  8. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  9. 自定义PopupWindow 怎么设置PopupWindow的宽度充满全屏宽度

    自定义了一个MyPopMenu类,用于上图中的下拉筛选效果的. 但是按照网上有说需要: new PopupWindow(view,getWindowManager().getDefaultDispla ...

随机推荐

  1. iOS中app的分发测试

    知识的学习在于分享.分享出来才能共同进步. 关于测试 有几种方式 1.开发人员直接在电脑上 用模拟器 2. 真机调试,测试人员可以拿着测试机找开发人员在电脑上跑真机测试 3. 公司和个人账号  直接 ...

  2. ASP.NET Core Linux环境安装并运行项目

    原文地址:https://blog.csdn.net/u014368040/article/details/79192622 一 安装环境 1.  从微软官网下载 Linux版本的.NetCoreSd ...

  3. Python - 列表解析式/生成器表达式

    列表解析式: [expr for iter_var in iterable if cond_expr] 生成器表达式: (expr for iter_var in iterable if cond_e ...

  4. c# 笔试题及参考答案大全

    http://blog.csdn.net/smileberry1/article/details/3958670

  5. 如何调试makefile变量

    六.七年前写过一篇<跟我一起写Makefile>,直到今天,还有一些朋友问我一些Makefile的问题,老实说,我有一段时间没有用Makefile了,生疏了.回顾,这几年来大家问题我的问题 ...

  6. Linux引导启动程序 - boot

    主要描述 boot/目录中的三个汇编代码文件,见列表 3-1 所示.正如在前一章中提到的,这三个 文件虽然都是汇编程序,但却使用了两种语法格式.bootsect.s 和 setup.s 采用近似于 I ...

  7. 传智播客c/c++公开课学习笔记--邮箱账户的破解与邮箱安全防控

    一.SMTP协议 SMTP(SimpleMail Transfer Protocol)即简单邮件传输协议. SMTP协议属于TCP/IP协议簇,通过SMTP协议所指定的server,就能够把E-mai ...

  8. nginx / apache / tomcat /resin等 http server的benchmark性能测试方法

    性能测试是软件产品发布前必经阶段,对于web app的发布需要使用http server,可选择的优秀免费http server主要有开源apache server, 俄国的nginx,专用于java ...

  9. SNF微信公众号客户端演示-微信开发客户端能干什么

    关注测试微信号: 关注后菜单页面如下: 一.扫描二维码进行订单查询演示 1.点击菜单“软件产品”->选择“扫描查询” 2.扫描如下二维码进行订单查询演示. 3.扫描结果如下: 二.微信“输入订单 ...

  10. MySQL 忘记root密码的两种处理方法

    [背景] 由于各个原因,我遇到过不只一次我服务的客户忘记了MySQL的root密码:如果是普通用户还好,我们可以用root用户去改它的密码,要命 的是把root给丢了! 对于MySQL来说如果你忘记了 ...