Slide 插件的实现

最新推荐文章于 2021-12-28 16:19:53 发布

z_z_Dragon

最新推荐文章于 2021-12-28 16:19:53 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签： slide插件的实现触摸事件移动端

本文链接：https://blog.youkuaiyun.com/z_z_Dragon/article/details/83409877

版权

js 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何实现移动端的Slide插件，通过监听触摸事件判断滑动方向，设置容器宽度并隐藏溢出内容，根据div数量计算滑动位置。在滑动过程中动态调整样式，实现在可视区域中显示指定的div模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、功能实现描述

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>