<!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+
- 资源: 5851
最新资源
- XIHE_Meteorological_Data_1730421195.csv
- 后台运行的写日志win32程序
- 一种用于减轻信息统计压力的个人信息生成软件
- 【源码+数据库】采用Java Swing+mysql实现的餐厅点餐系统
- Hex和Float数据转换工具
- 【java毕业设计】基于Spring Boot的养老院管理系统(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】springboot在线问诊系统的设计与实现(springboot+vue+mysql+说明文档).zip
- ESP32乐鑫开发中ESP-IDF离线安装包
- 基于 Java 实现的房源数据爬虫 支持断点续爬，价格变更通知，提供数据的分析统计服务
- arm架构mysql5.7.44,mysql-5.7.44-linux-aarch64.tar.gz
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
