首頁猿問 bootstrap輪播圖？

bootstrap輪播圖？

Bootstrap Html5 JavaScript

如果不能解決你的問題丶我會(huì)慚愧 2017-07-17 21:43:52

最近在做一個(gè)響應(yīng)式的個(gè)人博客網(wǎng)站。用的bootstrap做的輪播圖，體驗(yàn)很好；那么問題來了：移動(dòng)端怎么通過觸摸屏幕切換輪播圖片？拋棄別的框架如：swiper等（swiper我用了，可以）先不說，能不能不引入別的框架解決此問題，或者之前有同志遇到類似問題的，求告一下解決方案，本人有嚴(yán)重強(qiáng)迫癥，不完美的不行。謝謝各位老鐵先。

查看完整描述

1 回答

幕布斯7574896

TA貢獻(xiàn)38條經(jīng)驗(yàn) 獲得超3個(gè)贊

用js監(jiān)聽滑動(dòng)事件，然后調(diào)用輪播接口即可。這里有份示例：

<script?type?=?"text/javascript"?>
var?isTouch?=?('ontouchstart'?in?window);
if?(isTouch)?{
????$(".carousel").on('touchstart',
????function(e)?{
????????var?that?=?$(this);
????????var?touch?=?e.originalEvent.changedTouches[0];
????????var?startX?=?touch.pageX;
????????var?startY?=?touch.pageY;
????????$(document).on('touchmove',
????????function(e)?{
????????????touch?=?e.originalEvent.touches[0]?||?e.originalEvent.changedTouches[0];
????????????var?endX?=?touch.pageX?-?startX;
????????????var?endY?=?touch.pageY?-?startY;
????????????if?(Math.abs(endY)?<?Math.abs(endX))?{
????????????????if?(endX?>?10)?{
????????????????????$(this).off('touchmove');
????????????????????that.carousel('prev');
????????????????}?else?if?(endX?<?-10)?{
????????????????????$(this).off('touchmove');
????????????????????that.carousel('next');
????????????????}
????????????????return?false;
????????????}
????????});
????});
????$(document).on('touchend',
????function()?{
????????$(this).off('touchmove');
????});
}?<?/script>

反對回復(fù) 2018-05-11