http://www.imooc.com/code/5391做不出幻灯片效果
慕侠0374115
2015-09-17 15:12
http://www.imooc.com/code/5391做不出幻灯片效果
1回答
-
- lyp_0001
- 2015-11-25 11:33:28
可以的。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{padding:10px;margin:10px;}
</style>
</head>
<body>
<div id="slidershow" class="carousel">
<ol class="carousel-indicators">
<li data-target="#slidershow" class="active" data-slide-to="0">1</li>
<li data-target="#slidershow" class="active" data-slide-to="1">2</li>
<li data-target="#slidershow" class="active" data-slide-to="2">3</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
</div>
<div class="item">
<a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
</div>
<div class="item">
<a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
</div>
</div>
<a class="carousel-control left" href="#slidershow"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#slidershow"
data-slide="next">›</a>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
玩转Bootstrap（JS插件篇）
128653 学习 · 296 问题
相似问题