基于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 Object.extend
May 18 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 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后门URL的防范
2013/11/12 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python实现指定ip端口扫描方式
2019/12/17 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
C语言笔试题回忆
2015/04/02 面试题
linux系统都有哪些运行级别
2016/03/26 面试题
我的求职择业计划书
2014/04/04 职场文书
成绩单家长评语大全
2014/04/16 职场文书
教研处工作方案
2014/05/26 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
志愿者事迹材料
2014/12/26 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
未婚证明范本
2015/06/15 职场文书
结婚典礼致辞
2015/07/28 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
nginx静态资源的服务器配置方法
2022/07/07 Servers