亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

bootstrap輪播圖?

bootstrap輪播圖?

最近在做一個響應式的個人博客網站。 用的bootstrap做的輪播圖,體驗很好; 那么問題來了: 移動端怎么通過觸摸屏幕切換輪播圖片? 拋棄別的框架如:swiper等(swiper我用了,可以)先不說, 能不能不引入別的框架解決此問題, 或者之前有同志遇到類似問題的, 求告一下解決方案, 本人有嚴重強迫癥, 不完美的不行。 謝謝各位老鐵先。
查看完整描述

1 回答

?
幕布斯7574896

TA貢獻38條經驗 獲得超3個贊

用js監聽滑動事件,然后調用輪播接口即可。這里有份示例:

<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>


查看完整回答
反對 回復 2018-05-11
  • 1 回答
  • 0 關注
  • 2383 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號