<!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资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- 使用python爬取数据并采用Django搭建系统的前后台，使用Spark进行数据处理并进行电影推荐项目源码
- 基于C++的简易图书管理系统（含exe可执行文件）
- Python毕业设计基于知识图谱的电影推荐系统源码（完整项目代码）
- 国际象棋棋子检测3-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord数据集合集.rar
- Hadoop复习资料题库.zip
- 基于python和协同过滤算法的电影推荐系统
- 基于resnet的动物图像分类系统（python期末大作业）PyQt+Flask+HTML5+PyTorch.zip
- 电动蝶阀远程自动化控制系统的构建与应用
- 使用机器学习算法基于用户的社交媒体使用情况预测用户情绪
- jQuery信息提示插件
- 国际象棋棋子检测8-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 2023最新仿蓝奏云合集下载页面系统源码 带后台版本
- Cisco Packet Tracer实用技巧及网络配置指南
- 基于SpringBoot+Vue的家具商城系统设计与实现(编号：97913147)(1).zip
- 基于springboot+vue的大学生创业项目的信息管理系统(编号：96166263).zip
- 基于Springboot的本科实践教学管理系统(编号：1407703).zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
