基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于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幻灯片特效的更多相关文章
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Gumby – 基于 Sass 的灵活的,响应式 CSS 框架
Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 响应式js幻灯片代码一枚
网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...
- S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...
- Unslider – 轻量的响应式 jQuery 内容轮播插件
Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...
- 自定义PopupWindow 怎么设置PopupWindow的宽度充满全屏宽度
自定义了一个MyPopMenu类,用于上图中的下拉筛选效果的. 但是按照网上有说需要: new PopupWindow(view,getWindowManager().getDefaultDispla ...
随机推荐
- Centos 安装ImageMagick 与 imagick for php步骤详解
现在有很多朋友在使用安装ImageMagick imagick for php了,今天自己也想做但是不知道如何操作,下面我来给大家介绍Centos 安装ImageMagick imagick for ...
- 【Linux】数据流重导向(后篇)
1)/dev/null 垃圾桶黑洞装置与特殊写法 想象一下,如果我知道错误信息会发生,所以要将错误信息忽略掉而不显示或储存呢? 这个时候黑洞装置 /dev/null 就很重要了!这个 /dev/nul ...
- 探讨android更新UI的几种方法
作为IT新手,总以为只要有时间,有精力,什么东西都能做出来.这种念头我也有过,但很快就熄灭了,因为现实是残酷的,就算一开始的时间和精力非常充足,也会随着项目的推进而逐步消磨殆尽.我们会发现,自己越来越 ...
- jmeter Best Practices
性能测试最佳实践之JMeter 16. Best Practices 16.1 Always use latest version of JMeter The performance of JMete ...
- 用Python3发送邮件详解
[整个邮件系统是怎样工作的] 邮件自互联网诞生之初就有了,它和web服务一样也是采用的c/s架构,比如我们常见的邮件客户端有outlook.foxmail这些邮件客户端软件. 当我们要发邮件时客户端就 ...
- Android 版本对于 API
Android版本 API 代号 官网链接 Android 2.3.3 API 10 Gingerbread 官网 Android 3.0 API 11 Android 3.1 API 12 Andr ...
- 抛弃百度UMEditor,拥抱summernote (解决上传文件又慢又卡的问题)
由于一些项目上的原因以及相关因素,我们使用其他富文本编辑器替代了UMEditor 本来用CKEditor,但是团队觉得使用起来很不顺手,尤其图片上传十分不爽,功能复杂但是使用起来比较麻烦 后来我们又替 ...
- [na]交换机接口文档
文档中有一些数据包等附件,pdf不能看,去这里.http://note.youdao.com/share/?id=5319680eb0c8b9c3f8fefd157534fd90&type=n ...
- 关于在node项目使用ioredis遇到的几个坑
1,在ioredis中使用redis命令的方法的时候,如果有2个以上的参数,必须使用then方法来接收返回的结果,比如: redis.hget('key','field').then(function ...
- 2-7-集合运算(A-B)∪(B-A)-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第2章 线性表 - 集合运算(A-B)∪(B-A) ——<数据结构>-严蔚敏.吴伟民版 ★有疑问先阅读★ 源码使用说明 链接☛☛☛ <数据结构-C语言 ...