Page_slider.js 的使用

最新推荐文章于 2021-11-11 23:26:15 发布

码小龙

最新推荐文章于 2021-11-11 23:26:15 发布

阅读量365

点赞数 3

分类专栏：记录鼠标滑动原生js 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/yuan_xiao_long/article/details/115031510

版权

记录同时被 3 个专栏收录

2 篇文章

订阅专栏

原生js

2 篇文章

订阅专栏

鼠标滑动

1 篇文章

订阅专栏

Page_slider.js 的使用，PC端鼠标滚轮滚动效果

css代码

		<style type="text/css">
			.layer:nth-child(odd){background-color: aquamarine}
			.layer:nth-child(even){background-color:  brown}
		</style>

HTML格式

最外层盒子 id 符合标识符规则即可，内层盒子 id 一定要设为 bigBox ，最内层 class 为 layer，一个layer表示一层。
需要改进：还未实现嵌入其它标签的功能，只适用于全局。

	<body>
		
		<div id="box">
			<div id="bigBox">
				<div class="layer"></div>
				<div class="layer"></div>
				<div class="layer"></div>
			</div>
		</div>
		
	</body>

js使用

引入 js 后创建 ps 对象
成员：
idName：字符串；唯一主盒子名。
layerHeight：数组；设置每层盒子的高度，值为。设置每layer盒子的高度，默认每层是窗口的100%，如果给的个数小于层数，其余的对应，剩下的以最后一个值为准，比如：只给一个500，则每层都是500，给了500和800，第一个是500，其余的为800。
switchingTime：数字；设置切换每层的时长，默认是1000毫秒，1秒钟之后可以滑动下一次。
switchingSpeed：数字；设置每层切换所需时间，1为1秒可以是小数,默认为0.5s。
current：函数；获取当前滚动到第几层，0表示第一层，默认是没有值，第一次向下触发为1。

需要改进：对数组的内容还没做处理，后期还需要添加其它功能。

		<script src="Page_slider.js"></script>
		<script>
			var ps = new ps({
				idName:'box',
				layerHeight:[500,800,200,656,800,100,600,500],
				switchingTime:1,
				switchingSpeed:2,
				current:function(index){
					console.log(index)
				}
			})
		</script>

下载Page_slider.js: