求三张图片并列轮播的代码
展开全部
可以用bootstarp 很简单就可以实现了
<!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>
望采纳~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
