基于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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
vue实现购物车小案例
Sep 27 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
餐厅经理岗位职责范本
2014/02/17 职场文书
婚前保证书
2014/04/29 职场文书
篮球赛口号
2014/06/18 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
毕业生对母校寄语
2015/02/26 职场文书
文明礼貌主题班会
2015/08/14 职场文书