基于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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
简单易用的计数器(数据库)
2006/10/09 PHP
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python做简单的字符串匹配详解
2017/03/21 Python
python数据封装json格式数据
2018/03/04 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Python命令行click参数用法解析
2019/12/19 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
合同专员岗位职责
2013/12/18 职场文书
课内比教学心得体会
2014/09/09 职场文书
努力学习保证书
2015/02/26 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers