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

前端技术 2023/09/09 JavaScript

代码如下所示：

<!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实现广告轮播带图片和文字效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/24853

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案