<!--banner-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:40px;" >
<ol class="carousel-indicators" style="margin-bottom:-10px;">
<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="img/banner1.png" style="width: 100%; height:8%; " data-src=" " alt="First slide">
</div>
<div class="item">
<img src="img/banner2.png" style="width: 100%; height:8%; " data-src="" alt="Second slide">
</div>
<div class="item">
<img src="img/banner3.png" style="width: 100%; height:8%; " data-src="" alt="Third slide">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-top:80px; height:30px; display:none">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-top:80px; height:30px; display:none">›</a>
</div>
以上为html部分。
CSS:<link rel="stylesheet" href="css/bootstrap.min.css">
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
以上为轮播的js部分 <script src="js/bootstrap.min.js"></script>
触摸滑动效果引用hammer.js插件
hammer.js地址:http://hammerjs.github.io/getting-started/
jquery.hummer.js地址:https://github.com/hammerjs/jquery.hammer.js
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="js/jquery.hammer.js"></script>
以下为触摸滑动的js部分:
<script>
$('#myCarousel').hammer().on('swipeleft', function(){
$('#myCarousel').carousel('next');
});
$('#myCarousel').hammer().on('swiperight', function(){
$('#myCarousel').carousel('prev');
});
</script>
这样就ok了,适用于手机端页面,html代码中的图片样式尺寸可以自己调节。用百分比比较好一些,可以做到响应式。
如有侵权,请联系我,第一时间删除。