轉載地址:http://blog.csdn.net/wmwyyx/article/details/46608893#
用bootstrap做出的項目輪播圖在手機端不能滑動,爲此找了好多插件、框架。但是都不能和bootstrap良好的結合。
功夫不負有心人,經過一番查找終於在github找到了一段js:toucher.js,下載地址:http://download.csdn.net/download/wmwyyx/8832021
第一步--在head中加載toucher.js
<script type="text/JavaScript"src="__PUBLIC__/home/js/toucher.js"></script>
第二步--在輪播圖頁面實現觸屏事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- bookstrap導入三個 -->
<link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="bootstrap3.3.7/js/bootstrap.min.js"></script>
<script src="js/toucher.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide both" 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="image/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="image/3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a id="carleft" 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 id="carright" 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>
</div>
</body>
<script>
var myTouch = util.toucher(document.getElementById('carousel-example-generic'));
myTouch.on('swipeLeft', function(e) {
$('#carright').click();
}).on('swipeRight', function(e) {
$('#carleft').click();
});
</script>
</html>
JS是手指滑動時間,需要注意的地方是獲取的是3個地方的id改成你自己的,請注意!