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

 更新时间:2016年07月22日 14:48:03   作者:老_蜗牛   我要评论
这篇文章主要介绍了基于bootstrap实现广告轮播带图片和文字效果,效果非常棒,需要的朋友可以参考下

代码如下所示:

<!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模块化简单解析

    这篇文章主要针对javascript模块化为大家进行简单解析,如何写一个模块,在页面中加载模块的方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript 实现模态对话框 源代码大全

    JavaScript 实现模态对话框 源代码大全

    对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段。
    2009-05-05
  • 基于javascript实现彩票随机数生成(简单版)

    基于javascript实现彩票随机数生成(简单版)

    这篇文章主要介绍了基于javascript实现彩票随机数生成的相关资料,需要的朋友可以参考下
    2016-01-01
  • 解决JS中乘法的浮点错误的方法

    解决JS中乘法的浮点错误的方法

    本篇文章主要介绍了解决JS中乘法的浮点错误的方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript函数的特性与应用实践深入详解

    JavaScript函数的特性与应用实践深入详解

    这篇文章主要介绍了JavaScript函数的特性与应用实践,结合实例形式较为深入的分析了javascript函数相关概念、特性、用法及操作注意事项,需要的朋友可以参考下
    2018-12-12
  • (function(){})()的用法与优点

    (function(){})()的用法与优点

    (function(){})()的用法与优点...
    2007-03-03
  • JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信

    这篇文章主要为大家详细介绍了JavaScript Ajax实现异步通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • input的focus方法使用

    input的focus方法使用

    input有个focus方法,今天发现就在onblur事件里面起作用,onchang等事件中根本不起作用的
    2010-03-03
  • 多个js与css文件的合并方法详细说明

    多个js与css文件的合并方法详细说明

    在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题;解决该问题的一个好的方法就是合并js,css文件需要了解的朋友可以参考下
    2012-12-12
  • js中function()使用方法

    js中function()使用方法

    通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递,下面为大家介绍下函数的使用语法
    2013-12-12

最新评论