<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery兼容电脑手机端幻灯片切换代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="icons/entypo.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class='o-sliderContainer' id="pbSliderWrap0" style="margin-top:0;">
<div class='o-slider' id='pbSlider0'>
<div class="o-slider--item" data-image="images/5.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
<span class="a-divider"></span>
<p class="o-slider-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 sub paragraph </p>
</div>
</div>
<div class="o-slider--item" data-image="images/6.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
<span class="a-divider"></span>
<p class="o-slider-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 sub paragraph </p>
</div>
</div>
<div class="o-slider--item" data-image="images/1.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
<span class="a-divider"></span>
<p class="o-slider-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 sub paragraph </p>
</div>
</div>
<div class="o-slider--item" data-image="images/2.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
<span class="a-divider"></span>
<p class="o-slider-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 sub paragraph </p>
</div>
</div>
<div class="o-slider--item" data-image="images/3.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
<span class="a-divider"></span>
<p class="o-slider-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 sub paragraph </p>
</div>
</div>
<div class="o-slider--item" data-image="images/4.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
<span class="a-divider"></span>
<p class="o-slider-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 sub paragraph </p>
</div>
</div>
</div>
</div>
<pre class="pre" style="display: block;width: 600px;margin: 0 auto;">
<script>
$('#pbSlider0').pbTouchSlider({
slider_Wrap: '#pbSliderWrap0',
slider_Threshold: 10,
slider_Speed:600,
slider_Ease:'ease-out',
slider_Drag : true,
slider_Arrows: {
enabled : true
},
slider_Dots: {
class :'.o-slider-pagination',
enabled : true
},
slider_Breakpoints: {
default: {
height: 500
},
tablet: {
height: 350,
media: 1024
},
smartphone: {
height: 250,
media: 768
}
}
});
</script>
</pre>
<div style="clear:both;"></div>
<div class="a-container">
<h1>Touch slider jquery Plugin</h1>
<div class="a-1_2">
<div class='o-sliderContainer hasShadow' id="pbSliderWrap">
<div class='o-slider' id='pbSlider'>
<div class="o-slider--item" data-image="images/5.jpg"></div>
<div class="o-slider--item" data-image="images/6.jpg"></div>
<div class="o-slider--item" data-image="images/1.jpg"></div>
<div class="o-slider--item" data-image="images/2.jpg"></div>
<div class="o-slider--item" data-image="images/3.jpg"></div>
<div class="o-slider--item" data-image="images/4.jpg"></div>
</div>
</div>
<pre class="pre">
<script>
$('#pbSlider').pbTouchSlider({
slider_Wrap: '#pbSliderWrap',
slider_Threshold: 50,
slider_Speed:400,
slider_Ease:'linear',
slider_Drag : false,
slider_Arrows: {
enabled : false
},
slider_Breakpoints: {
default: {
height: 300
},
tablet: {
height: 250,
media: 1024
},
smartphone: {
height: 200,
media: 768
}
}
});
</script>
</pre>
</div><div class="a-1_2">
<div class='o-sliderContainer hasShadow' id="pbSliderWrap2">
<div class='o-slider' id='pbSlider2'>
<div class="o-slider--item" data-image="images/3.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
<div class="o-slider--item" data-image="images/4.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
<div class="o-slider--item" data-image="images/5.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
<div class="o-slider--item" data-image="images/1.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
<div class="o-slider--item" data-image="images/2.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
<div class="o-slider--item" data-image="images/6.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
</div>
</div>
<pre class="pre">
<script>
$('#pbSlider2').pbTouchSlider({
slider_Wrap: '#pbSliderWrap2',
slider_Threshold: 25,
slider_Speed:1000 ,
slider_Ease:'cubic-bezier(.16,.92,0,.8)',
slider_Dots: {
class:'.slider-pagination',
enabled : false
},
slider_Breakpoints: {
default: {
height: 300
},
tablet: {
height: 250,
media: 1024
},
smartphone: {
height: 200,
media: 768
}
}
});
</script>
</pre>
</div>
<div class='o-sliderContainer hasShadow ' id="pbSliderWrap3">
<div class='o-slider' id='pbSlider3'>
<div class="o-slider--item" data-image="images/1.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
</div>
<div class="o-slider--item" data-image="images/2.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">This is a title</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">This is a sub title</h2>
</div>
jQuery兼容电脑手机端幻灯片切换代码.zip （19个子文件） 
js 
slider.min.js 6KB hammer.min.js 20KB slider.js 13KB jquery-1.11.0.min.js 94KB hammer.js 71KB css style.css 12KB normalize.css 2KB icons 
entypo.svg 113KB entypo.css 17KB entypo.woff 44KB entypo.ttf 74KB entypo.eot 74KB
index.html 11KB images 
2.jpg 81KB 6.jpg 61KB 1.jpg 98KB 5.jpg 208KB 3.jpg 200KB 4.jpg 140KB资源评论
