1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>基于bootstrap的轮播广告页,带图片和文字</title> 8 <link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 9 <style> 10 .carousel { 11 height: 500px; 12 } 13 .carousel .item { 14 height: 500px; 15 } 16 .carousel .item img { 17 width: 100%; 18 } 19 </style> 20 </head> 21 22 <body> 23 <!-- 轮播广告 --> 24 <div id="LBbox" class="carousel slide" data-ride="carousel"> 25 <!-- 圆点按钮 --> 26 <ol class="carousel-indicators"> 27 <li data-target="#LBbox" data-slide-to="0" class="active"></li> 28 <li data-target="#LBbox" data-slide-to="1"></li> 29 </ol> 30 <!-- 轮播内容 --> 31 <div class="carousel-inner" role="listbox"> 32 <div class="item active"> 33 <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="1 slide"> 34 <div class="carousel-caption"> 35 <h1>第四代 Intel Core 处理器</h1> 36 <p>无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p> 37 <p> 38 <a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a> 39 </p> 40 </div> 41 </div> 42 <div class="item"> 43 <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="2 slide"> 44 <div class="carousel-caption"> 45 <h1>MacBook Air</h1> 46 <p>有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。</p> 47 <p> 48 <a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a> 49 </p> 50 </div> 51 </div> 52 </div> 53 <!-- 左按钮 --> 54 <a href="#LBbox" class="left carousel-control" role="button" data-slide="prev"> 55 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 56 <span class="sr-only">上一页</span> 57 </a> 58 <!-- 右按钮 --> 59 <a href="#LBbox" class="right carousel-control" role="button" data-slide="next"> 60 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 61 <span class="sr-only">下一页</span> 62 </a> 63 </div> 64 65 66 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 67 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 68 </body> 69 </html>