基于bootstrap实现广告轮播带图片和文字效果
代码如下所示：
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>基于bootstrap的轮播广告页，带图片和文字</title>
<linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.carousel{
height:500px;
}
.carousel.item{
height:500px;
}
.carousel.itemimg{
width:100%;
}
</style>
</head>
<body>
<!--轮播广告-->
<divid="LBbox"class="carouselslide"data-ride="carousel">
<!--圆点按钮-->
<olclass="carousel-indicators">
<lidata-target="#LBbox"data-slide-to="0"class="active"></li>
<lidata-target="#LBbox"data-slide-to="1"></li>
</ol>
<!--轮播内容-->
<divclass="carousel-inner"role="listbox">
<divclass="itemactive">
<imgsrc="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg"alt="1slide">
<divclass="carousel-caption">
<h1>第四代IntelCore处理器</h1>
<p>无论是什么任务，配备IntelHDGraphics5000图形处理器的第四代IntelCore处理器都能应对自如。</p>
<p>
<ahref="#"class="btnbtn-lgbtn-primary"role="button">点我下载</a>
</p>
</div>
</div>
<divclass="item">
<imgsrc="http://img.mukewang.com/5412ae5c0001653b12800644.jpg"alt="2slide">
<divclass="carousel-caption">
<h1>MacBookAir</h1>
<p>有了新一代802.11ac技术，MacBookAir令Wi-Fi速度超越极限。</p>
<p>
<ahref="#"class="btnbtn-lgbtn-primary"role="button">点我下载</a>
</p>
</div>
</div>
</div>
<!--左按钮-->
<ahref="#LBbox"class="leftcarousel-control"role="button"data-slide="prev">
<spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></span>
<spanclass="sr-only">上一页</span>
</a>
<!--右按钮-->
<ahref="#LBbox"class="rightcarousel-control"role="button"data-slide="next">
<spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span>
<spanclass="sr-only">下一页</span>
</a>
</div>
<scriptsrc="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
以上所述是小编给大家介绍的基于bootstrap实现广告轮播带图片和文字效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！