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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript入门基础
Aug 12 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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中几种常见安全设置详解
2010/04/06 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
专升本个人自我评价
2013/12/22 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
欢迎领导检查标语
2014/06/27 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
关于运动会的广播稿
2015/08/19 职场文书