基于bootstrap实现广告轮播带图片和文字效果


Posted in Javascript onJuly 22, 2016

代码如下所示:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基于bootstrap的轮播广告页,带图片和文字</title>
<link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
}
.carousel .item img {
width: 100%;
}
</style>
</head>
<body>
<!-- 轮播广告 -->
<div id="LBbox" class="carousel slide" data-ride="carousel">
<!-- 圆点按钮 -->
<ol class="carousel-indicators">
<li data-target="#LBbox" data-slide-to="0" class="active"></li>
<li data-target="#LBbox" data-slide-to="1"></li>
</ol>
<!-- 轮播内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="1 slide">
<div class="carousel-caption">
<h1>第四代 Intel Core 处理器</h1>
<p>无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p>
<p>
<a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a>
</p>
</div>
</div>
<div class="item">
<img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="2 slide">
<div class="carousel-caption">
<h1>MacBook Air</h1>
<p>有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。</p>
<p>
<a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a>
</p>
</div>
</div>
</div>
<!-- 左按钮 -->
<a href="#LBbox" class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一页</span>
</a>
<!-- 右按钮 -->
<a href="#LBbox" class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一页</span>
</a>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

以上所述是小编给大家介绍的基于bootstrap实现广告轮播带图片和文字效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 #Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 #Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 #Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 #Javascript
详细探究ES6之Proxy代理
Jul 22 #Javascript
jquery常用的12个小功能
Jul 22 #Javascript
BootStrap 附加导航组件
Jul 22 #Javascript
You might like
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
详解React 条件渲染
2020/07/08 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
浅谈python3中input输入的使用
2019/08/02 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
JAVA程序员面试题
2012/10/03 面试题
解除合同协议书
2014/04/17 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python