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,超强推荐base.js
Dec 23 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 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
介绍几个array库的新函数 php
2006/12/29 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
python实现排序算法
2014/02/14 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
标准发言稿结尾
2019/07/18 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技