<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery幻灯片插件pbTouchSlider演示-带标题描述</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/entypo.css">
<style>
.wrap { width: 1000px; margin: 0 auto;}
</style>
</head>
<body>
<h1>带标题描述</h1>
<div class="wrap">
<div class="o-sliderContainer hasShadow" id="dowebokWrap">
<div class="o-slider" id="dowebok">
<div class="o-slider--item" data-image="images/5.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">这是标题</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">这是副标题</h2>
<span class="a-divider"></span>
<p class="o-slider-paragraph">这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介</p>
</div>
</div>
<div class="o-slider--item" data-image="images/6.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">这是标题</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">这是副标题</h2>
<span class="a-divider"></span>
<p class="o-slider-paragraph">这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介</p>
</div>
</div>
<div class="o-slider--item" data-image="images/1.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">这是标题</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">这是副标题</h2>
<span class="a-divider"></span>
<p class="o-slider-paragraph">这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介</p>
</div>
</div>
<div class="o-slider--item" data-image="images/2.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">这是标题</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">这是副标题</h2>
<span class="a-divider"></span>
<p class="o-slider-paragraph">这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介</p>
</div>
</div>
<div class="o-slider--item" data-image="images/3.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">这是标题</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">这是副标题</h2>
<span class="a-divider"></span>
<p class="o-slider-paragraph">这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介</p>
</div>
</div>
<div class="o-slider--item" data-image="images/4.jpg">
<div class="o-slider-textWrap">
<h1 class="o-slider-title">这是标题</h1>
<span class="a-divider"></span>
<h2 class="o-slider-subTitle">这是副标题</h2>
<span class="a-divider"></span>
<p class="o-slider-paragraph">这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介，这是描述这是简介</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/slider.js"></script>
<script>
$(function() {
$('#dowebok').pbTouchSlider({
slider_Wrap: '#dowebokWrap'
});
});
</script>
<!-- 以下信息与演示无关，可不必理会 -->
<style>
body { margin: 0; border-left: 200px solid #ccc;}
h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}
.menu { position: fixed; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc; overflow-y: auto;}
.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { background-color: #eee;}
.menu .cur { color: #000; background-color: #fff !important;}
.vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}
.code { position: relative; margin-top: 100px; padding-top: 41px;}
.code h3 { position: absolute; top: 0; z-index: 10; width: 100px; height: 40px; font: 16px/40px "Microsoft Yahei"; text-align: center; cursor: pointer;}
.code .cur { border: 1px solid #f0f0f0; border-bottom: 1px solid #f8f8f8; background-color: #f8f8f8;}
.code .h31 { left: 0;}
.code .h32 { left: 102px;}
.code .h33 { left: 204px;}
.code .h34 { left: 306px;}
.code ol { padding: 0;}
.code { width: 800px; margin-left: auto; margin-right: auto;}
pre { padding: 15px 0; border: 1px solid #f0f0f0; background-color: #f8f8f8; overflow-y: auto;}
.f-dn { display: none;}
</style>
<div class="menu">
<a href="index.html">1、默认效果</a>
<a href="index2.html">2、不显示箭头</a>
<a href="index3.html">3、不显示圆点</a>
<a href="index4.html">4、禁止拖动</a>
<a href="index5.html">5、带链接</a>
<a class="cur" href="index6.html">6、带标题描述</a>
<a href="index7.html">7、兼容平板手机</a>
</div>
</body>
</html>
基于pbTouchSliderCjquery滑动响应式幻灯片插件特效代码.zip
版权申诉
97 浏览量
2022-11-10
00:27:32
上传
评论
收藏 837KB ZIP 举报
基于pbTouchSliderCjquery滑动响应式幻灯片插件特效代码.zip （23个子文件） 
132675100733761664 likecs.com_132675100756263233 css 
entypo.svg 113KB
entypo.ttf 74KB entypo.woff 44KB entypo.css 17KB style.css 11KB entypo.eot 74KB
index5.html 3KB index4.html 3KB images 
2.jpg 102KB 1.jpg 42KB 6.jpg 54KB 3.jpg 160KB 5.jpg 149KB 4.jpg 93KB index.html 3KB js jquery.min.js 95KB hammer.min.js 20KB slider.js 13KB hammer.js 71KB index2.html 3KB index6.html 5KB index7.html 3KB index3.html 3KB资源评论
