<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>轮播</title>
<link rel=\"stylesheet\" href=\"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css\">
<script src=\"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js\"></script>
<script src=\"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js\"></script>
</head>
<body>
<div id=\"myCarousel\" class=\"carousel slide\">
<ol class=\"carousel-indicators\">
<li data-target=\"#myCarousel\" data-slide-to=\"0\"
class=\"active\"></li>
<li data-target=\"#myCarousel\" data-slide-to=\"1\"></li>
<li data-target=\"#myCarousel\" data-slide-to=\"2\"></li>
</ol>
<div class=\"carousel-inner\">
<div class=\"item active\">
<img src=\"image_1.png\" alt=\"第一张图\">
</div>
<div class=\"item\">
<img src=\"image_2.png\" alt=\"第二张图\">
</div>
<div class=\"item\">
<img src=\"image_3.png\" alt=\"第三张图\">
</div>
</div>
<a class=\"carousel-control left\" href=\"#myCarousel\"
data-slide=\"prev\">‹</a>
<a class=\"carousel-control right\" href=\"#myCarousel\"
data-slide=\"next\">›</a>
<div style=\"text-align:center;\">
<input type=\"button\" class=\"btn next-slide\" value=\"下个页面\">
</div>
</div>
<script>
$(function(){
$(\".next-slide\").click(function(){
$(\"#myCarousel\").carousel(\'next\');
});
});
</script>
</body>
</html>
转载自:https://zhidao.baidu.com/question/684617507370770132.html
版权声明
本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。


