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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
详解VSCode配置启动Vue项目
May 14 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
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php中final关键字用法分析
2016/12/07 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
jQuery创建DOM元素实例解析
2015/01/19 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python基础教程之面向对象的一些概念
2014/08/29 Python
python 实时遍历日志文件
2016/04/12 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python autoescape标签用法解析
2020/01/17 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
幼儿园师德师风心得体会
2016/01/12 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers