您好,登錄后才能下訂單哦!
1.touch事件
(1)touchstart 手指放到屏幕觸發
(2)touchmove 滑動觸發
(3)touchend 離開觸發
(4)touchcancel 系統取消touch事件的時候觸發,比較少用
一般時封裝使用來實現這三種操作,可以使用封裝成熟的js庫
2.zeptojs
是一個輕量級的針對現代高級瀏覽器的JavaScript庫,它與jQuery有著類似的api。會用jQuery就會zeptojs。一些可選功能時專門針對移動端瀏覽器的;它的最初目標是在移動端提供一個精簡的類似jQuery的js庫
官網:http://zeptojs.com
中文api:http://www.css88.com/doc/zeptojs_api/
默認版本包括core、Ajax、event、form、IE模塊
自定義構建:http://github.e-sites.nl/zeptobuilder/
注意:了解即可
3.swiper
是一款成熟穩定的應用于PC端和移動端的滑動效果插件,一般用來觸屏焦點圖、觸屏整屏滾動等效果。swiper版本2.x支持低版本瀏覽器,3.x放棄支持低版本,適用應用在移動端
中文網:http://www.swiper.com.cn/
4.swiper參數設置
(1)initialSlide:初始索引值,從0開始
(2)direction:滑動方向 horizontal | vertical
(3)speed:滑動速度,單位ms
(4)autoplay:設置自動播放及播放時間
(5)autoplayDisableOnlnteraction:用戶操作swiper后是否還自動播放,默認是true,不再自動播放
(6)paginnation:分頁圓點
(7)paginationClickable:分頁圓點是否點擊
(8)prevButton:上一頁箭頭
(9)nextButton:下一頁箭頭
(10)loop:是否首尾銜接
$(function(){
var swiper = new Swiper('.swiper-container', { /創建一個swiper,父級div類,分頁類,按鈕類/
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
// 初始的幻燈片是第幾張
initialSlide :0,
// 小圓點是否可點擊
paginationClickable: false,
//是否連續播放(設置false會在最后一張返回)
loop: true,
// 設置多長時間間隔播放一張
autoplay:3000,
// 用戶操作后還是否自動播放
autoplayDisableOnInteraction:true
})
});
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。