Bootstrap开发实战之响应式轮播图


Posted in Javascript onJune 02, 2016

本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下

一、响应式轮播图

//响应式轮播图

<div id="myCarousel" class="carousel slide">
 <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" style="background:#223240;">
 <a href="#"><img src="img/slide1.png" alt="第一张"></a>
 </div>
 <div class="item" style="background:#F5E4DC;">
 <a href="#"><img src="img/slide2.png" alt="第二张"></a>
 </div>
 <div class="item" style="background:#DE2A2D;">
 <a href="#"><img src="img/slide3.png" alt="第三张"></a>
 </div>
 </div>
 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">‹</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a>
</div>

//所需要的 jQuery 控制

$('#myCarousel').carousel({
 //设置自动播放/2 秒
 interval : 3000,
});

//调整轮播器箭头位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');
$(window).resize(function() {
 var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();
 $('.carousel-control').css('line-height', $height + 'px');
});

//所需要的 CSS

a:focus {
 outline: none;
}
.navbar-brand {
 padding: 0;
}
#myCarousel {
 margin: 50px 0 0 0;
}
.carousel-inner .item img {
 margin: 0 auto;
}
.carousel-control {
 font-size: 100px;
}

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
JavaScript核心语法总结(推荐)
Jun 02 #Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 #Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 #Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 #Javascript
深入理解Ajax的get和post请求
Jun 02 #Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 #Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 #Javascript
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
诚信承诺书模板
2014/05/26 职场文书
政府个人对照检查材料
2014/08/28 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
锅炉工岗位职责
2015/02/13 职场文书
小兵张嘎观后感
2015/06/03 职场文书