简单轮播图2

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

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

获取源码可点击此处

####

功能

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

展示

设计思路

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

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

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

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

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

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

关键源码解析

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

  1. 如何进行无缝轮播？

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    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;
    };

  1. 创建位置按钮

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 创建点击按钮的节点
    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);
    };

  2. 设置自动轮播

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    // 动画过渡时间
    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);
    };

获取源码可点击此处