我想实现轮播图的效果,但是运行没反应,始终是第一张图


<script>
    var img1=document.querySelector('.img1');
    var imgBox=img1.querySelector('.a1');
    var first=imgBox.querySelector('li:first-of-type');
    var last=imgBox.querySelector('li:last-of-type');
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
    var lis=a1.querySelectorAll('li');
    var count=lis.length;
    var bannerWidth=img1.offsetWidth;
    imgBox.style.width=count*bannerWidth*'px';
    for (var i=0;i<lis.lngth;i++){
        lis[i].style.width=bannerWidth+'px';
    }
    var index=1;
    imgBox.style.left=-bannerWidth+'px';
    var startX,moveX, distanceX;
    imgBox.addEventListener('touchstart',function(e){
        startX=e.targetTouches[0].clientX;
    });
    imgBox.addEventListener('touchmove',function(e){
        moveX=e.targetTouches[0].clientX;
        distanceX=moveX-startX;
        imgBox.style.transition='none';
        imgBox.style.left=(-index*bannerWidth+distanceX)+'px';
    });
    imgBox.addEventListener('touchend',function(e){
        if(Math.abs(distanceX) > 80){
            if (distanceX > 0){
                index--;
            }else{
                index++;
            }
            imgBox.style.transition='left 0.5s ease-in-out';
            imgBox.style.left=(-index*bannerWidth)+'px';
        }else if (Math.abs(distanceX)> 0) {
            imgBox.style.transition='left 0.5s ease-in-out';
            imgBox.style.left=-index*bannerWidth+'px';
        }
    });
    imgBox.addEventListener('webkitTransitlonEnd',function(){
        if (index == count-1){
            index=1;
        }else if (index=0){
            index=count-2;
        }
        imgBox.style.transition='none';
        imgBox.style.left=-index*bannerWidth+'px';
    });
```html

```

看报错没,应该是你index的问题