jQeury滑动响应式幻灯片插件pbTouchSlider

一款jQeury滑动响应式幻灯片插件pbTouchSlider，共有7中效果可供选择，每一种效果都有不同的参数设置和演示样式：默认效果、不显示箭头、不显示圆点、禁止拖动、带链接、带标题描述和兼容平板手机。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需设置好页面元素的样式，代码如下：

body { margin: 0; border-left: 200px solid #ccc;}
h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}
.wrap { width: 1000px; margin: 0 auto;}
.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;}
.f-dn { display: none;}

页面的body部分，用了多个div的嵌套结构，图片放在div的“data-images”属性里面，代码如下：

<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>
			<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>
</div>

页面的底部，需引入jQuery库和图片滑动插件，并启用插件设置好参数，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hammer.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
	$('#dowebok').pbTouchSlider({
		slider_Wrap: '#dowebokWrap'
	});
});
</script>