<!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的轮播广告页，带图片和文字的更多相关文章

  1. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  2. 基于BootStrap的轮播图

    准备 先设计一个承载轮播图的区域:四周向外阴影.扁平圆角: 1 #myShuffArea{ 2 width: 50%; 3 height: 300px; 4 border: solid 1px gai ...

  3. ViewPaper实现轮播广告条

    使用V4包中的viewPaper组件自己定义轮播广告条效果. 实现viewpaper的滑动切换和定时自己主动切换效果. 上效果图 布局文件 <RelativeLayout xmlns:andro ...

  4. 最简单的轮播广告(原生JS)

    改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. FLASH轮播广告 在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）

    在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...

  6. 利用RecyclerView实现无限轮播广告条

    代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...

  7. CPD轮播广告库的简单算法

    在广告的领域中,有一种广告形式,采用的是CPD的售卖模式,为了对流量进行拆分,媒体方会对广告位进行轮播拆分.比如一个广告位,被拆成了10轮播,那么在广告主来预订广告位的时候,这个时候就可以告诉广告主, ...

  8. bootstrap 获得轮播中的索引 getActiveIndex

    今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引 ...

  9. bootStrap的轮播

    1.1如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. Oralce 字符串截取

    update E_SYS_STRATEGY set sconfigvalue=(select Substr((select sconfigvalue from E_SYS_STRATEGY where ...

  2. network: Android 网络判断（wifi、3G与其他）

    package mark.zeng; import Java.util.List; import Android.content.Context; import android.location.Lo ...

  3. Volatile vs. Interlocked vs. lock

    今天在stackoverflow上看到一个关于Volatile, Interlock, Lock的问题,发现回答的特别好,所以就想到把它翻译一下, 希望给那些对它们有疑惑的人提供点帮助 :假设有一个类 ...

  4. [Poetize I]黑魔法师之门

    描述 Description applepi被囚禁的地点只有一扇门,当地 人称它为“黑魔法师之门”.这扇门上画着一张无向无权图,而打开这扇门的密码就是图中[每个点的度数大于零且都是偶数]的子图的个数对 ...

  5. Linux Shell编程（5）——shell特殊字符（下）

    {}代码块[花括号]. 这个结构也是一组命令代码块,事实上,它是匿名的函数.然而与一个函数所不同的,在代码块里的变量仍然能被脚本后面的代码访问. bash$ { local a;      a=123 ...

  6. 【模拟】NCPC 2014 E ceremony

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1791 题目大意: N栋大楼(N<=100000),拆除的时候有两种选择的操作,可 ...

  7. vijos P1243 生产产品（单调队列+DP）

      P1243生产产品   描述 在经过一段时间的经营后,dd_engi的OI商店不满足于从别的供货商那里购买产 品放上货架,而要开始自己生产产品了!产品的生产需要M个步骤,每一个步骤都可以在N台机器 ...

  8. 《A First Course in Probability》-chaper4-离散型随机变量-随机变量函数的期望

    给定一个离散型随机变量X,根据定义我们容易得到期望E[X],但是在具体的问题当中,我们会得到一个关于X的另一个函数关系Y=g(X),那么我们就非常的好奇,根据函数关系Y=g(X)和随机变量X的分布列数 ...

  9. 《A First Course in Probability》-chaper5-连续型随机变量-均匀随机变量

    在连续随机变量这部分,有一种特殊的随机变量X,对于X所有可能取值,P(X)都相等,我们称其为均匀随机变量. 基于均匀随机变量的定义,我们容易看到,其密度函数f(x)必然是一条平行于x轴的直线,因为这样 ...

  10. Apache-Tika解析HTML文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理HTML格式的文章,如下: package com.mengyao.tika.app; i ...