Bootstrap3的响应式缩略图幻灯轮播效果设计
HTML
<div class="container">
<div class="col-md-12">
<h3>Bootstrap 3 缩略图幻灯画廊效果</h3>
</div>
</div>
<div class="container">
<!-- main slider carousel -->
<div class="row">
<div class="col-md-12" id="slider">
<div class="col-md-12" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=1" class="img-responsive">
</div>
<div class="item" data-slide-number="1">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=2" class="img-responsive">
</div>
<div class="item" data-slide-number="2">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=3" class="img-responsive">
</div>
<div class="item" data-slide-number="3">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=4" class="img-responsive">
</div>
<div class="item" data-slide-number="4">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=5" class="img-responsive">
</div>
<div class="item" data-slide-number="5">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=6" class="img-responsive">
</div>
<div class="item" data-slide-number="6">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=7" class="img-responsive">
</div>
<div class="item" data-slide-number="7">
<img src="http://www.gbtags.com/gb/laitu/1200x480&text=8" class="img-responsive">
</div>
</div>
<!-- main slider carousel nav controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<!--/main slider carousel-->
<div class="row">
<div class="col-md-12">
<!-- thumb navigation carousel -->
<div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
<!-- thumb navigation carousel items -->
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=1/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-1">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=2/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-2">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=3/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-3">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=4/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-4">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=5/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-5">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=6/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-6">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=7/efb73e/888888" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-7">
<img src="http://www.gbtags.com/gb/laitu/80x60&text=8/efb73e/888888" class="img-responsive">
</a></li>
</ul>
</div>
</div>
</div>
</div>
Javascript
$('#myCarousel').carousel({
interval: 4000
}); $('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
}); $('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
Bootstrap3的响应式缩略图幻灯轮播效果设计的更多相关文章
- Unslider – 轻量的响应式 jQuery 内容轮播插件
Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...
- 关于Layui 响应式移动端轮播图的问题
用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...
- 使用bootstrap建立响应式网页——通栏轮播图(carousel)
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- cssSlidy.js 响应式手机图片轮播
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...
- swiper.js 响应式多图轮播特效
swiper.js实现响应式的左右切换图片案例展示布局 1.head引入css文件 <link type="text/css" rel="stylesheet&qu ...
- flickity:支持触摸滑动,响应迅速的幻灯片轮播插件
简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...
- Bootstrap幻灯轮播如何支持触屏左右滑动手势?
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
- 12款响应式 Lightbox(灯箱)效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
随机推荐
- 微信小程序无法获取到unionId(专业踩坑20年)
UnionID机制说明如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程 ...
- Mysql数据库命令行输入错误怎么办
Mysql数据库命令行输入错误 缺少另一半 错误输入 ' 或 " 时,必须键入另一半才能退出命令. 缺少分号 写入语句缺少分号需要补全. 输入quit或者exit退出 ctrl+c,完全退出 ...
- Linux启动过程的内核代码分析
参考上文: http://www.cnblogs.com/long123king/p/3543872.html http://www.cnblogs.com/long123king/p/3545688 ...
- el-select 1.4.x版本实现2.x.x版本的reserve-keyword功能
今天在维护以前的项目时,发现了一个小bug,其实也不算是bug,只是客户对这个控件的体验不是很满意. 我们在element 2.x.x的版本的官方文档中可以发现el-select组件的属性中比1.x. ...
- 重大利好,Dubbo 3.0要来了。
关于Dubbo的好消息,2018年1月8日,Dubbo创始人之一梁飞在Dubbo交流群里透露了Dubbo 3.0正在开工的重大消息. Dubbo是阿里开源的分布式框架,已经多年停止更新处于半死不活状态 ...
- jmeter 查看结果树之查看响应的13种方法
查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择 1 Text 查看结果树中请求的默认格式为Text,显示取样器结果.请求.响应数据3个部分内容. 取样器结果: 默认Raw展示,可以切换 ...
- gary's mod
第一题: class Parent(object): x = 1 class Child1(Parent): pass class Child2(Parent): pass print(Parent. ...
- 47-Ubuntu-系统信息-2-df和du查看磁盘和目录空间占用
序号 命令 作用 01 df -h disk free 显示磁盘剩余空间;-h以人性化的方式显示文件大小 02 du -h [目录名] disk usage 显示目录下的文件大小 注:显示磁盘信息的时 ...
- hdu 3123 2009 Asia Wuhan Regional Contest Online
以为有啥牛逼定理,没推出来,随便写写就A了----题非常水,可是wa了一次 n>=m 则n!==0 注意的一点,最后 看我的凝视 #include <cstdio> #includ ...
- css 折角效果/切角效果
首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...