這是一款支持移動(dòng)手機(jī)的響應(yīng)式j(luò)query輪播圖插件。它具有跨平臺(tái)，響應(yīng)式，支持移動(dòng)設(shè)備等特點(diǎn)，并且在使用CSS3制作過(guò)渡動(dòng)畫(huà)，效果非常炫酷。

使用方法

在頁(yè)面中引入jquery，hammer.min.js和slider.js文件以及圖標(biāo)樣式文件entypo.css和CSS3動(dòng)畫(huà)樣式文件style.css。

HTML結(jié)構(gòu)

該jquery輪播圖的基本HTML結(jié)構(gòu)如下：

This is a title

This is a sub title

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph

This is a title

This is a sub title

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph

This is a title

This is a sub title

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph

This is a title

This is a sub title

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph

This is a title

This is a sub title

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph

This is a title

This is a sub title

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph This is a sub paragraph

This is a sub paragraph

初始化插件

在頁(yè)面DOM元素加載完畢之后，可以通過(guò)下面的方法來(lái)初始化該jquey輪播圖插件。

$('#pbSlider0').pbTouchSlider({

slider_Wrap : '#yourId', // Assign a unique ID to the div.o-sliderContainer

slider_Item : '.o-slider--item', // Single Item

slider_Drag : true, // Your choise.. to dragIt or not to dragIt..this is the question...

slider_Dots : { // Wanna see dots or not?

class :'.o-slider-pagination',

enabled : true

},

slider_Arrows : { // Wanna see Arrows or not?

class :'.o-slider-arrows',

enabled : true

},

slider_Threshold : 25, // Percentage of dragX before go to next/prev slider

slider_Speed : 1000,

slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)', // see http://cubic-bezier.com/

slider_Breakpoints : { // Kind of media queries ( can add more if you know how to do it :D and if you need )

default : {

height : 500 // height on desktop

},

tablet : {

height : 400, // height on tablet

media : 1024 // tablet breakpoint

},

smartphone : {

height : 300, // height on smartphone

media : 768 // smartphone breakpoint

}

}

});

總結(jié)

以上是生活随笔為你收集整理的手机html轮播图,jquery支持移动手机的响应式轮播图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。