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

来源:https://www.sucaihuo.com/js/2879.html 2017-08-30 23:58浏览(1360) 收藏

一款jQeury滑动响应式幻灯片插件pbTouchSlider,共有7中效果可供选择,每一种效果都有不同的参数设置和演示样式:默认效果、不显示箭头、不显示圆点、禁止拖动、带链接、带标题描述和兼容平板手机。
jQeury滑动响应式幻灯片插件pbTouchSlider
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 39 下载资源 下载积分: 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>
评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 椅子
    09-15 09:58
    l***
    挺好的 ,挺全的.
  • 头像 沙发
    08-31 20:57
    A***i
    炫酷且实用
1 2