<!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/demo.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="htmleaf-container">
<header class="htmleaf-header">
<h1>jQuery响应式手机端触屏滑动图片轮播插件 <span>A Touch slider jquery Plugin</span></h1>
</header>
<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>
</d
jQuery响应式手机端触屏滑动图片轮播插件.zip （20个子文件） 
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 demo.css 1KB normalize.css 2KB icons 
entypo.svg 113KB entypo.css 17KB entypo.woff 44KB entypo.ttf 74KB entypo.eot 74KB
index.html 13KB images 
2.jpg 53KB 6.jpg 29KB 1.jpg 19KB 5.jpg 81KB 3.jpg 96KB 4.jpg 40KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- 电影购票系统-Java Web项目
- SPD-Conv-main.zip
- 使用Python和Pygame库创建新年烟花动画效果
- chapter9.zip
- 安居客Python爬虫代码.zip
- 企业可持续发展性数据集，ESG数据集，公司可持续发展性数据（可用于多种企业可持续性研究场景）
- 车辆轨迹自适应预瞄跟踪控制和自适应p反馈联合控制，自适应预苗模型和基于模糊p控制均在simulink中搭建 个人觉得跟踪效果相比模糊pid效果好很多，轨迹跟踪过程，转角控制平滑自然，车速在36到72
- 数据分析-49-客户细分-K-Means聚类分析
- TIA PORTAL V18 UPD5更新包（2024.10最新）-链接地址.txt
- 使用Python和Pygame实现圣诞节动画效果
- 自动驾驶不同工况避障模型（perscan、simulink、carsim联仿），能够避开预设的（静态）障碍物
- 100个情侣头像，唯美手绘情侣头像
- 国际象棋检测10-YOLO（v5至v9）、COCO、CreateML、Paligemma数据集合集.rar
- 2024~2025（1）Oracle数据库技术A卷-22软单、软嵌.doc
- 睡眠健康与生活方式数据集，睡眠和生活习惯关联分析（睡眠影响因素）
- 浪漫节日代码 - 爱心代码、圣诞树代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
