前端新手写轮播图2

简单轮播图2

该文章是《前端新手写轮播图》的第二篇，添加了过渡动画，自动轮播的功能

查看第一篇文章可点击此处

获取源码可点击此处

功能

1. 点击切换图片
2. 自动轮播
3. 无缝轮播
4. 有动画过渡

展示

设计思路

1. 将轮播图以行的形式进行排列（每张图大小是一样的）

   

2. 增加一个视窗（我们看到的内容区），这个视窗的大小是图片的大小，将视窗之外的内容设置隐藏

3. 给以行排列的图片设置成绝对定位

4. 每点击一次切换，进行绝对定位的计算，让该显示的图片定位到视窗区域

5. 在最后加上克隆最前面两张的图片。这样便能无缝轮播

   

将视窗外的内容不隐藏，就会看到以下内容

关键源码解析

在第一篇文章前端新手写轮播图的基础上进行解析

1. 如何进行无缝轮播？

   答：在最后加上克隆最前面两张的图片。当轮播到第六张图片时，先去掉间隔时间，然后瞬间定位到第二张图片。当轮播到第一张时，去掉间隔时间，瞬间定位到第五张图片。这样下次在临界图片处轮播时候就能进行无缝轮播。

   1. 在最后加上克隆最前面两张的图片。
   
   let swipePic = document.querySelector('.swipe__pic');
   cloneNode(swipePic, 0);
   cloneNode(swipePic, 1);
   
   const cloneNode = (elem, index) => {
   
       //复制节点，放到最后,使得动画过渡效果连续
       let nodeTmp = swipePicChildNode[index].cloneNode(true);
       elem.appendChild(nodeTmp);
   };
   
   2. 处理轮播到临界图片的情况
   
   // 单个图片的宽度
   const singlePicWidth = 200;
   
   const setPosition = (currrentPosition) => {
     
     	// 轮播到最后一张图片时，定位到第二张图片
       if (currrentPosition == (singlePicWidth - swipeWidth)) {
           setTransitionDuration('0s');
           setLeftWidth(-singlePicWidth);
       }
   		
     	// 轮播到第一张图片时，定位到倒数第二张图片
       if(currrentPosition == 0) {
           setTransitionDuration('0s');
           setLeftWidth(2*singlePicWidth - swipeWidth);
       }
       return;
   };
   

2. 创建位置按钮

   // 创建点击按钮的节点
   const createBottonNode = (elem, index) => {
       let nodeTmp = document.createElement('div');
       nodeTmp.innerText = index + 1;
       nodeTmp.className = 'swipe__button-item';
       nodeTmp.onclick = () => {
           actionClick(index);
       }
       elem.appendChild(nodeTmp);
   };
   

3. 设置自动轮播

   // 动画过渡时间
   const durationTime = 1000;
   
   // 模拟点击
   const autoClick = (dirction, startPlay) => {
       // 设置轮播过渡时间
       swipePic.style.webkitTransitionDuration = durationTime + 'ms';
   
       // 计算轮播后的宽度
       let styleLeft = parseInt(swipePic.style.left) + singlePicWidth*dirction;
   
       // 设置剩余宽度
       swipePic.style.left = styleLeft + 'px';
   
       setButtonPos();
   
       // 在轮播完之后进行位置的切换，不然不会执行轮播的过渡动画
       setTimeout(() => {
           setPosition(styleLeft);
           startPlay && startPlay(); // 设置自动轮播
       }, durationTime);
   };
   
   // 设置自动轮播
   function startPlay() {
       timePlay = setInterval(autoClick, durationTime + 1000);
   }
   
   // 模拟向右滑动动作
   arrowRight.onclick = () => {
       // 去除自动轮播
       stopPlay();
   
     	// 点击动作，点击执行完后设置自动轮播
       picMove(plus, startPlay);
   };
   
   

获取源码可点击此处