Slide 插件的实现

一、功能实现描述

n个div模块实现左右滑动，支持移动端触摸

二、实现原理以及思路

1.容器宽度为n*100%，隐藏溢出内容

2.监听触摸事件，判断移动方向

2.根据div的个数，计算生成一个数组，保存每个div的index，和计算出容器TranslateX()的值

3.根据计算的值，在滑动事件中给容器添加style样式，来实现某个div在可见视图中

三、代码

1.js

function Slide() {var direction=0,start=0,end=0;//负左划var currentIndex=0,model=[];var boxes = document.querySelectorAll('div.slideItem');var wrap = document.querySelector('div.slideWrap');var prev = document.querySelector('div.prev');var next = document.querySelector('div.next');var count=boxes.length;var max=count,min=-1;var moveright=function () {var prev=getPos(currentIndex-1,1);if(currentIndex>=0){wrap.style.cssText+='transform:translateX(-'+prev+'%)';currentIndex--;}currentIndex=correctCurrentIndex(currentIndex);console.log(currentIndex)};var moveleft=function () {var next=getPos(currentIndex+1,0);if(currentIndex<=3){wrap.style.cssText+='transform:translateX(-'+next+'%)';currentIndex++;}currentIndex=correctCurrentIndex(currentIndex);console.log(currentIndex)};var getPos=function(pos,isRight){var _index;if(isRight){_index=pos<0?0:pos;}else{_index=pos>count-1?count-1:pos;}return model[_index].pos;};var movestart = function (e) {start=e.changedTouches[0].screenX;};var moveend = function (e) {end=e.changedTouches[0].screenX;direction=end-start;console.log(direction)direction>0?moveright():moveleft();};//纠正下标边界var correctCurrentIndex=function (_currentIndex) {_currentIndex=_currentIndex<=min?0:_currentIndex;_currentIndex=_currentIndex>=max?max-1:_currentIndex;return _currentIndex;};wrap.style.cssText+=('width:'+count*100+'%');for(var i=0;i<boxes.length;i++){boxes[i].style.cssText+=('width:'+100/count+'%');boxes[i].addEventListener('touchstart', movestart);boxes[i].addEventListener('touchend', moveend);model.push({order:i,pos:(i*(100/count))})}this.setCurrentIndex=function (newCurrent) {direction=+(newCurrent>currentIndex);currentIndex=newCurrent;};this.getCurrentIndex=function () {return currentIndex;};prev.addEventListener('click',moveright.bind(this));next.addEventListener('click',moveleft.bind(this));
}

2.html

<div class="container"><div class="prev"><</div><div class="next">></div><div class="slideWrap"><div class="slideItem"><i>1</i></div><div class="slideItem"><i>2</i></div><div class="slideItem"><i>3</i></div></div>
</div>

Slide 插件的实现相关推荐

MUI-轮播插件实现-UI组件
一.简介: 轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播.可拖动式图文表格.可拖动式选项卡.左右滑动9宫格等组件,这些组件有较多共同点,如Dom构造基本相同. <di ...
pc端html轮播带滑块,原生js实现移动端+pc端轮播插件
slide.js 原生js写的轮播兼容 pc+移动端插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...
大话主席（superslide和 touchslide）插件的使用
对于实现效果来说,插件的办事效率真的是太高了,而且里边也被处理过兼容性,用起来实在是特别方便,现在我们来说说大话主席中的slide插件,它分为pc端(superslide)和移动端(touchslid ...
superslide 学习笔记
近日了了解了一下jquery 插件superSlide,有种相见恨晚的感觉,这实在是一款常用,实用的插件: 可以做 1.标签切换 / 书签切换 / 默认效果 2.焦点图 / 幻灯片 3.图片滚动 4. ...
18款非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
HTML5 极简的JS函数
页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...
如何重构一个过万Star开源项目—BetterScroll
过去的 v1 时代距离 BetterScroll v1 版本发布,至今已经 3 年多,由于它在移动端良好的滚动体验与性能以及多种滚动场景的支持,深受社区的青睐.用户也可以基于 BetterScrol ...
mui h5+文档最详版
mui h5+文档最详版界面初始化 H5plus初始化创建子页面打开界面参数传递控制页面load显示关闭界面底部导航切换界面自定义事件页面预加载消息框原生模式ActionShee ...
最接近原生APP体验的高性能前端框架——MUI
前言 MUI有三大特点: 轻量追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...

Slide 插件的实现

Slide 插件的实现相关推荐

最新文章

热门文章