39,084
社区成员
发帖
与我相关
我的任务
分享bootstrap轮播代码和api的一样为什么不会轮播，还有怎么添加手势滑动
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width,initial-scale=1.0" charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/lunbojiaqianhou.js"></script>
<script type="text/javascript" >
$(function() {
$("#slidershow").carousel({
interval: 2000
});
$("#slidershow a.left").click(function() {
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function() {
$(".carousel").carousel("next");
});
});
</script>
</head>
<body>
<div id="slidershow" class="carousel slide">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="img/14955882637371.jpg" alt="" class="center-block"></a>
<div class="carousel-caption">
<h3>图片标题1</h3>
<p>描述内容1...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="img/14955882657419.jpg" alt="" class="center-block"></a>
<div class="carousel-caption">
<h3>图片标题2</h3>
<p>描述内容2...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="img/1495588332208916.jpg" alt="" class="center-block"></a>
<div class="carousel-caption">
<h3>图片标题3</h3>
<p>描述内容3...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slidershow" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="with=device-width,initial-scale=1.0" charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/lunbojiaqianhou.js"></script>
<script type="text/javascript" >
$(function() {
$("#slidershow").carousel({
interval: 2000
});
$("#slidershow a.left").click(function() {
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function() {
$(".carousel").carousel("next");
});
});
</script>
</head>
<body>
<div id="slidershow" class="carousel slide">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="img/14955882637371.jpg" alt="" class="center-block"></a>
<div class="carousel-caption">
<h3>图片标题1</h3>
<p>描述内容1...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="img/14955882657419.jpg" alt="" class="center-block"></a>
<div class="carousel-caption">
<h3>图片标题2</h3>
<p>描述内容2...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="img/1495588332208916.jpg" alt="" class="center-block"></a>
<div class="carousel-caption">
<h3>图片标题3</h3>
<p>描述内容3...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slidershow" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
shigungji 2017-08-08
- 打赏
- 举报
哪位大牛知道错在哪里，麻烦告知，谢谢了谢谢了
