javascript触摸刷功能不工作

几周来，我一直在努力为我的网站添加滑动功能。我发现最好的就是这个

现在我的代码是这样的： .html：

.js：

window.addEventListener（'load'，function（）{
var element=document.getElementById（'swipgallery'）；//referenceire den hauptsächlichen DIV Container der Galerie
var galerieBreite=元素偏移网络宽度；
var unorderedList=element.getElementsByTagName（'ul'）[0]；
var anzahlListenPunkte=unorderedList.getElementsByTagName（'li'）。长度，
derzeitigerIndex=0，
无序列表左=0；
unorderedList.style.width=Galeriebretite*AnzahlistenPunkte；//将不符合要求的不符合要求的不符合要求的材料放在不符合要求的地方
ontouch（元素、功能（evt、richtung、相位、SwipetType、Abstrand）{
如果（阶段==“开始”）{//bei touchstart
unorderedListLeft=parseInt（unorderedList.style.left）| | 0；//Initialisiere unorderedList和links von UL
}
否则，如果（阶段='move'&（richtong='left'| | richtong='right'）{//Wird ausgeführt在水平方向上与stattfindet保持一致
var gesamtAbstand=absand+unorderedListLeft；//Berechne den neuen absand für UL durch Bewegung des Fingers
unorderedList.style.left=Math.min（gesamtAbstand，（derzeitigerIndex+1）*galerieBreite）+“px”；//Setze neuen Abstrand von links aus
}
else if（阶段=='end'）{//end
如果（SwipType='left'| | SwipType=='right'）{//Wen die Bewegung横向战争
derzeitigerIndex=（SwipType='left'）？Math.min（derzeitigerIndex+1，AnzahlistenPunkte-1）：Math.max（derzeitigerIndex-1，0）；//Gebe neuen Index für Bild aus
}
unorderedList.style.left=-derzeitigerIndex*galerieBreite+'px'；//Bewege zum neuen Bild
}
})//Ende der Funktion ontouch
}，错）
函数ontouch（el，回调）{
var touchsurface=el，
局长，
泳衣，
startX，
斯塔蒂，
distX，
迪西，
threshold=150，//考虑刷卡所需的最小移动距离
约束=100，//垂直方向上同时允许的最大距离
allowedTime=500，//允许行驶该距离的最大时间
时光流逝，
开始的时候，
handletouch=callback | |函数（evt、dir、phase、swipetype、distance）{}
touchsurface.addEventListener（'touchstart'，函数（e）{
var touchobj=e.changedTouches[0]
dir='none'
SwipType='无'
距离=0
startX=touchobj.pageX
startY=touchobj.pageY
startTime=new Date（）.getTime（）//记录手指首次接触表面的时间
handletouch（e，'none'，'start'，swipeType，0）//使用params dir=“none”、phase=“start”、swipeType=“none”等参数启动回调函数
e、 预防默认值（）
}，错）
touchsurface.addEventListener（'touchmove'，函数（e）{
var touchobj=e.changedTouches[0]
distX=touchobj.pageX-startX//获取手指在接触表面时移动的水平距离
distY=touchobj.pageY-startY//获取手指接触表面时移动的垂直距离
如果（数学。ABS（DISX）>数学。ABS（DISY））{/ /如果水平行进的距离大于垂直，考虑这是水平运动。
dir=（distX<0）？“左”：“右”
handletouch（e，dir，'move'，swipeType，distX）//使用参数dir=“left | right”、phase=“move”、swipeType=“none”等启动回调函数
}
否则{//或认为这是一个垂直运动。
dir=（距离<0）？“向上”：“向下”
handletouch（e，dir，'move'，swipeType，distY）//使用参数dir=“up | down”、phase=“move”、swipeType=“none”等启动回调函数
}
e、 preventDefault（）//在DIV内时防止滚动
}，错）
touchsurface.addEventListener（'touchend'，函数（e）{
var touchobj=e.changedTouches[0]
elapsedTime=new Date（）.getTime（）-startTime//获取经过的时间
如果（elapsedTime=threshold&&Math.abs（distY）=threshold&&Math.abs（distX）这应该适合您

let xTouchDown, yTouchDown; 

document.querySelector("#swipegallery").addEventListener('touchstart', (e) => {
    let firstTouch = e.touches[0];                                      
    xTouchDown = firstTouch.clientX;                                      
    yTouchDown = firstTouch.clientY; 
});

document.querySelector("#swipegallery").addEventListener('touchmove', (e) => {
    if (!xTouchDown || !yTouchDown) return;
    let xTouchUp = e.touches[0].clientX;                                    
    let yTouchUp = e.touches[0].clientY;
    let xDifferential = xTouchDown - xTouchUp;
    let yDifferential = yTouchDown - yTouchUp;

    if (Math.abs(xDifferential) > Math.abs(yDifferential)){
        if ( xDifferential > 0 ){
            //swiping left
            console.log("left swipe");
        } 
        else{
            //swiping right
            console.log("right swipe");
        }                       
    }
    xTouchDown = null;
    yTouchDown = null;                                             
});

很抱歉回复太晚，但根本不起作用
.touchgallery {
    position: relative;
    overflow: hidden;
    width: 800px; /* default gallery width */
    height: 600px; /* default gallery height */
    background: #eee;
    margin: auto;
}
 
.touchgallery ul{
    list-style: none;
    margin: 0;
    padding: 0;
    left: 0;
    position: absolute;
    -moz-transition: all 100ms ease-in-out; /* image transition. Change 100ms to desired transition duration */
    -webkit-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
}
 
.touchgallery ul li{
    float: left;
    display: block;
    width: 800px;
    text-align: center;
}
 
.touchgallery ul li img{ /* CSS for images within gallery */
    width: 95%;
    max-width: 1000px; /* make each image responsive, so its native width can occupy up to 100% of gallery's width, but not beyond */
    height: auto;
}

window.addEventListener('load', function(){
    var element = document.getElementById('swipegallery'); // Referenziere den hauptsächlichen DIV Container der Galerie
    var galerieBreite = element.offsetWidth;
    var unorderedList = element.getElementsByTagName('ul')[0];
    var anzahlListenPunkte = unorderedList.getElementsByTagName('li').length, 
        derzeitigerIndex = 0, 
        unorderedListLeft = 0;
    unorderedList.style.width = galerieBreite * anzahlListenPunkte; // Setze die Gesamtbreite von ungeordneteListe durch Breite des Bildes multipliziert mit der Anzahl der Bilder
    
    ontouch(element, function(evt, richtung, phase, swipetype, abstand){
        if (phase == 'start'){ // bei touchstart
            unorderedListLeft = parseInt(unorderedList.style.left) || 0; // Initialisiere unorderedList mit dem Abstand links von UL
        }
        else if (phase == 'move' && (richtung =='left' || richtung =='right')){ //  Wird ausgeführt wenn eine horizontale Bewegung stattfindet
            var gesamtAbstand = abstand + unorderedListLeft; // Berechne den neuen Abstand für UL durch Bewegung des Fingers
            unorderedList.style.left = Math.min(gesamtAbstand, (derzeitigerIndex+1) * galerieBreite) + 'px'; // Setze neuen Abstand von links aus
        }
        else if (phase == 'end'){ // bei touchend
            if (swipetype == 'left' || swipetype == 'right'){ // Wenn die Bewegung horizontal war
                derzeitigerIndex = (swipetype == 'left')? Math.min(derzeitigerIndex+1, anzahlListenPunkte-1) : Math.max(derzeitigerIndex-1, 0); // Gebe neuen Index für Bild aus
            }
            unorderedList.style.left = -derzeitigerIndex * galerieBreite + 'px'; // Bewege zum neuen Bild
        }
    }) // Ende der Funktion ontouch
}, false)

function ontouch(el, callback){
 
    var touchsurface = el,
    dir,
    swipeType,
    startX,
    startY,
    distX,
    distY,
    threshold = 150, //required min distance traveled to be considered swipe
    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
    allowedTime = 500, // maximum time allowed to travel that distance
    elapsedTime,
    startTime,
    handletouch = callback || function(evt, dir, phase, swipetype, distance){}
 
    touchsurface.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]
        dir = 'none'
        swipeType = 'none'
        dist = 0
        startX = touchobj.pageX
        startY = touchobj.pageY
        startTime = new Date().getTime() // record time when finger first makes contact with surface
        handletouch(e, 'none', 'start', swipeType, 0) // fire callback function with params dir="none", phase="start", swipetype="none" etc
        e.preventDefault()
 
    }, false)
 
    touchsurface.addEventListener('touchmove', function(e){
        var touchobj = e.changedTouches[0]
        distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
        distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
        if (Math.abs(distX) > Math.abs(distY)){ // if distance traveled horizontally is greater than vertically, consider this a horizontal movement
            dir = (distX < 0)? 'left' : 'right'
            handletouch(e, dir, 'move', swipeType, distX) // fire callback function with params dir="left|right", phase="move", swipetype="none" etc
        }
        else{ // else consider this a vertical movement
            dir = (distY < 0)? 'up' : 'down'
            handletouch(e, dir, 'move', swipeType, distY) // fire callback function with params dir="up|down", phase="move", swipetype="none" etc
        }
        e.preventDefault() // prevent scrolling when inside DIV
    }, false)
 
    touchsurface.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        elapsedTime = new Date().getTime() - startTime // get time elapsed
        if (elapsedTime <= allowedTime){ // first condition for awipe met
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
                swipeType = dir // set swipeType to either "left" or "right"
            }
            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
                swipeType = dir // set swipeType to either "top" or "down"
            }
        }
        // Fire callback function with params dir="left|right|up|down", phase="end", swipetype=dir etc:
        handletouch(e, dir, 'end', swipeType, (dir =='left' || dir =='right')? distX : distY)
        e.preventDefault()
    }, false)
}
 
// USAGE:
/*
ontouch(el, function(evt, dir, phase, swipetype, distance){
 // evt: contains original Event object
 // dir: contains "none", "left", "right", "top", or "down"
 // phase: contains "start", "move", or "end"
 // swipetype: contains "none", "left", "right", "top", or "down"
 // distance: distance traveled either horizontally or vertically, depending on dir value
 
 if ( phase == 'move' && (dir =='left' || dir == 'right') )
  console.log('You are moving the finger horizontally by ' + distance)
})
*/

let xTouchDown, yTouchDown; 

document.querySelector("#swipegallery").addEventListener('touchstart', (e) => {
    let firstTouch = e.touches[0];                                      
    xTouchDown = firstTouch.clientX;                                      
    yTouchDown = firstTouch.clientY; 
});

document.querySelector("#swipegallery").addEventListener('touchmove', (e) => {
    if (!xTouchDown || !yTouchDown) return;
    let xTouchUp = e.touches[0].clientX;                                    
    let yTouchUp = e.touches[0].clientY;
    let xDifferential = xTouchDown - xTouchUp;
    let yDifferential = yTouchDown - yTouchUp;

    if (Math.abs(xDifferential) > Math.abs(yDifferential)){
        if ( xDifferential > 0 ){
            //swiping left
            console.log("left swipe");
        } 
        else{
            //swiping right
            console.log("right swipe");
        }                       
    }
    xTouchDown = null;
    yTouchDown = null;                                             
});