html代码`bootstrap的插件
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
//代码有设置检测屏幕大小隐藏与显示hidden-xx
<div class="carousel-inner" role="listbox" id="lunbo">
<div class="item active">
<a href="#" class=" hidden-xs hidden-sm"></a>
<img src="./image/slide_01_640x340.jpg" class="hidden-lg hidden-md ">
</div>
<div class="item">
<a href="#" class=" hidden-xs hidden-sm"></a>
<img src="./image/slide_02_640x340.jpg" class="hidden-lg hidden-md">
</div>
<div class="item">
<a href="#" class=" hidden-xs hidden-sm"></a>
<img src="./image/slide_03_640x340.jpg" class="hidden-lg hidden-md">
</div>
<div class="item" >
<a href="#" class=" hidden-xs hidden-sm"> </a>
<img src="./image/slide_04_640x340.jpg" class="hidden-lg hidden-md">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
//移动端滑动,//js代码`
//定义2个变量
let startX,endX;
//获取要滑动的区域
let lunbo =$("#lunbo")[0];
//获取当前轮播图
let carousel=$(".carousel")
//手机触摸时位置
lunbo.addEventListener("touchstart",function(e){
startX=e.targetTouches[0].clientX;
})
//手机触摸结束时位置
lunbo.addEventListener("touchend",function(e){
endX=e.changedTouches[0].clientX;
if(endX-startX>0){
// 上一张
carousel.carousel('prev');
} else if(endX-startX < 0){
/*下一张*/
carousel.carousel('next');
}
})
以上是boostrap轮播图实现移动端滑动切换