c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果

插件描述：jQuery响应式图片插件，多种图片滑动轮播切换，兼容手机端的触屏滑动图片切换代码。

响应式触摸滑块 Javascript/css3 滑块

HTML

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 

JAVASCRIPT

$('#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

}

}

});

引用库Hammer.js /单和多点触控手势库

Lea Verou - cubic-bezier /CSS3 的缓动功能

Daniel Bruce - entypo  /字体图标

jQuery / JS框架