1.首先让 bootstrap 的页面自适应移动端屏幕大小,加上下面这句标签即可。
<meta name="viewport" content="width=device-width, initial-scale=1">
2.下面是 bootstrap 轮番图的代码,直接从官网复制过来的。
使用时自己引入 bootstrap 需要的官方 css + js 文件。
<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="3"></li> <li data-target="#myCarousel" data-slide-to="2"></li><li data-target="#myCarousel" data-slide-to="4"></li> <img src="static/img/slide1.png" alt="First slide" style="width:100%;height: 20%;"> </ol> <div class="carousel-inner"><div class="item active"></div><div class="item"> <img src="static/img/slide3.png" alt="Third slide" style="width:100%;height: 20%;"> <img src="static/img/slide2.png" alt="Second slide" style="width:100%;height: 20%;"></div><div class="item"></div><div class="item"> <img src="static/img/slide3.png" alt="Third slide" style="width:100%;height: 20%;"> <img src="static/img/slide2.png" alt="Second slide" style="width:100%;height: 20%;"></div><div class="item"></div></div><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="sr-only">Next</span></a> </div>
3.然后建一个新的 js 文件,把下面的代码引入到放轮番图的 html 文件中,即可实现
移动端左右滑动事件。
$(function () {
// 获取手指在轮播图元素上的一个滑动方向(左右)
// 获取界面上轮播图容器
var $carousels = $('.carousel');
var startX,endX;
// 在滑动的一定范围内,才切换图片
var offset = 50;
// 注册滑动事件
$carousels.on('touchstart',function (e) {
// 手指触摸开始时记录一下手指所在的坐标x
startX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchmove',function (e) {
// 目的是:记录手指离开屏幕一瞬间的位置 ,用move事件重复赋值
endX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchend',function (e) {
//console.log(endX);
//结束触摸一瞬间记录手指最后所在坐标x的位置 endX
//比较endX与startX的大小,并获取每次运动的距离,当距离大于一定值时认为是有方向的变化
var distance = Math.abs(startX - endX);
if (distance > offset){
//说明有方向的变化
//根据获得的方向 判断是上一张还是下一张出现
$(this).carousel(startX >endX ? 'next':'prev');
}
})
});