记得引用Boostrap的js和css
html代码:
<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >
<!-- 底部的指示小圆点-->
<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="img/banner.png" width="100%" /> </div>
<div class="item">
<img src="img/banner.png" width="100%"/>
</div>
<div class="item ">
<img src="img/banner.png" width="100%"/>
</div>
</div> </div>
一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了
关键的步骤来了,我们需要写一个javascript命令调用hammer.js中的swipe功能
<script>
$(function(){
var myElement= document.getElementById('Mycarousel')
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$('#Mycarousel').carousel('next')
})
hm.on("swiperight",function(){
$('#Mycarousel').carousel('prev')
})
})
</script>
1.引用bootstrap的js方法,但是只能实现定时图片轮播
<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >
<!-- 底部的指示小圆点-->
<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="img/banner.png" width="100%" />
</div>
<div class="item">
<img src="img/banner.png" width="100%"/>
</div>
<div class="item ">
<img src="img/banner.png" width="100%"/>
</div>
</div>
</div>
2.添加手势触摸轮播,引用hammer.js
<script src="js/hammer.min.js"></script>
3.添加js代码在script中
$(function(){
var myElement=document.getElementById('Mycarousel');
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$('#Mycarousel').carousel('next');
})
hm.on("swiperight",function(){
$('#Mycarousel').carousel('prev');
})
});