html轮播图片效果代码(轮播图怎么实现的原理细节详解)

可以看到在原列表中只有四张图片，直接获取到 list 之后把内容复制一遍就可以得到八张图片了。

第二步，获取元素，设置变量

  let wrap = document.querySelector('.wrap');//获取外框，以便设置图片滚动的宽度
  let list = wrap.querySelector('.list');//图片列表
  let dot = wrap.querySelectorAll('.dot li');//小点
  
  let startpoint = {};//鼠标按下的起始点
  let distaince = {};//移动的距离
  
  list.innerHTML += list.innerHTML;//复制图片列表

这里其实没什么可说的，用原生去写交互，无非就是获取元素然后添加事件操作元素，所以接下来要做什么你们就知道了，在这里我写的是移动端版本的，所以用的是touch事件

第三步，添加事件

  wrap.addEventListener('touchstart',(ev)=>{
        //手指按下
      let touch = ev.changedTouches[0];
      startpoint = {//这里记录手指按下的位置
          x:touch.pageX,
          y:touch.pageY
      }
  })  //在手指按下的时候要做的事情其实很简单，只需要记录手指按下的位置就好了，先让图片能拖动，之后再考虑无缝滚动的事情
  
  wrap.addEventListener('touchmove',(ev)=>{//手指移动
      let touch = ev.changedTouches[0];
      distaince = {//移动的时候计算出移动了多少距离
          x:touch.pageX - startpoint.x,
          y:touch.pageY - startpoint.y
      }

      translatex = startOffset + distaince.x;
      list.style.transform = `translateX(${translatex}px)`;//把计算出来的移动距离附加给图片列表
  })  //到这一步，图片就已经可以被拖动了

这里，已经实现了图片可以被拖动了，接下来，判断什么时候要切换到下一张。
这里的话，如果你没有过多的研究，完全可以一拍脑袋来决定，但是如果要注重用户体验，那就听我的用一个比例来控制。 比如：当图片被拖动的距离超过外框的30%，那么这时候松开手会自动切换到下一张或者上一张，所以这时候我们需要一个变量来控制这个比例，以便于我们去反复调整
于是，当手指抬起的时候，应该要去做这一系列的判断：

  let now = 0;//当前在那一张
  let imgW = wrap.offsetWidth;//获取一下外框的宽度
  let proportion = 0.3;//当图片拖动超过整体宽度的比例时，跳转到下一张或者上一张
  
  wrap.addEventListener('touchend',()=>{//手指抬起
      if(Math.abs(distaince.x) > imgW * proportion){//这里判断什么时候切换
          now -= distaince.x/Math.abs(distaince.x);//这里判断是切换上一张还是下一张
      }

      translatex = now * -imgW; //判断好了之后计算图片列表需要移动的距离
      list.style.transition = '0.3s';
      list.style.transform = `translateX(${translatex}px)`;
  })

到这里，我们已经可以拖动图片，然后切换上一张下一张了。 但是如果想要无缝，还是需要进一步操作的，在原理解析那里有说，可以再看看这张原理分析图：

可以看到，当点下去的瞬间，如果图片在第一张，那么瞬间跳转到第二组的第一张，这样无论是往左拖动还是往右拖动，都是有图片的，来看代码：

wrap.addEventListener('touchstart',(ev)=>{       
   let touch = ev.changedTouches[0];
        startpoint = {
            x:touch.pageX,
            y:touch.pageY
        }   if(now == 0){//如果当前是第0张，则直接跳转到第二组的第0张
            now = dot.length;
        }else if(now == dot.length*2 -1){//如果是最后一张，则跳转到第一组的最后一张
            now = dot.length -1;
        }

        translatex = now * -imgW;//计算好之后再挪动图片列表
        startOffset = translatex;
        list.style.transition = 'none';
        list.style.transform = `translateX(${translatex}px)`;
    })

到这里，无缝滚动其实也就没有问题了，来看看完整的代码：

锦上添花
按道理来讲，代码写到这里已经差不多了，但是我还是想给小按钮也加上点击事件，点击小按钮能跳转到对应的图片上：

 Array.from(dot).forEach((item,index)=>{
      item.onclick = function(ev){        
        Array.from(dot).forEach((item)=>{
              item.classList.remove('active');
          })

          now = index;          
          this.classList.add('active');
          translatex = now * -imgW;
          list.style.transition = '0.3s';
          list.style.transform = `translateX(${translatex}px)`;
          ev.preventDefault();
      }
  })

这段代码应该没什么可讲的吧，不过接下来，神奇的事情就发生了：

懂了么？ 原理都是通用的，懂了就分享给别人...