图片轮播

Clloz · 4年前 · 1,156次浏览 ·

• Home
• Programming > Front end > Javascript
• 图片轮播

Clloz

前言

用两种方式实现图片轮播，自动轮播和拖动轮播。

代码结构

由于 img 是一个可选标签，可以被拖动，我们这里选择用 background-image 来实现。基本的 DOM 结构和 CSS 如下：

<style>
    .carousel {
        width: 500px;
        height: 280px;
        margin: 30px auto;
        font-size: 0;
        white-space: nowrap;
        overflow: hidden;
    }
    .carousel > div {
        display: inline-block;
        width: 500px;
        height: 280px;
        background-size: contain;
        transition: ease 0.5s;
    }
    .carousel > div:nth-child(1) {
        background-image: url('https://img.clloz.com/blog/writing/cat1.jpg');
    }
    .carousel > div:nth-child(2) {
        background-image: url('https://img.clloz.com/blog/writing/cat2.jpg');
    }
    .carousel > div:nth-child(3) {
        background-image: url('https://img.clloz.com/blog/writing/cat3.jpg');
    }
    .carousel > div:nth-child(4) {
        background-image: url('https://img.clloz.com/blog/writing/cat4.jpg');
    }
</style>

<div class="carousel cp1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="carousel cp2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我们用 display: inline-block 和 overflow: hidden 让图片横向排列并且一次只显示一张。这里需要注意 inline-block 空格导致的间隙问题，我直接用 font-size: 0 来解决。

自动轮播

自动轮播的逻辑是比较简单的，我们其实只要关注两张图片，即当前图片和下一张图片。设每一张图片的编号为 index （从 0 开始），每一张图片要显示所对应的 translateX 的值就是 -(index * 100)%。所以我们只需要每次移动时将当前图片和下一章图片左移一个单位（即一张图片的宽度），同时将下一次要显示的图片放到当前图片的右边一个单位。如下图：

关键逻辑就是将下次要显示的图片移动到预备位置，并且这个过程要关掉动画效果。最后的代码如下：

// transform loop settimeout
let el2 = document.querySelector('.carousel.cp2');
let currentIndex = 0;
setInterval(() => {
    let children = el2.children;
    let nextIndex = (currentIndex + 1) % children.length;
    let current = children[currentIndex];
    let next = children[nextIndex];

    next.style.transition = 'none';
    next.style.transform = `translateX(${100 - nextIndex * 100}%)`;

    setTimeout(() => {
        next.style.transition = '';
        current.style.transform = `translateX(${-100 - currentIndex * 100}%)`;
        next.style.transform = `translateX(${-nextIndex * 100}%)`;
        currentIndex = nextIndex;
    }, 16);
}, 3000);

动画效果的开关我们可以用 element.style.transition 来控制行内样式的值来达到效果。因为行内样式的优先级最高，当我们设置其值为 none 会覆盖 style 标签中的样式。当我们将 element.style.transition 的值设为 ''，style 标签中的对应样式又生效了

代码中间使用了一个小技巧。就是如果连续对同一个元素进行操作，浏览器会忽略前一个操作，这里我们用一个 setTimeout 避免浏览器的这种行为，16ms 为浏览器一帧的时间。

还有一点就是最后一张图片的下一张应该是第一张，这里我们可以使用简单的模运算来达到效果，模就是元素的个数。

拖动轮播

拖动轮播的逻辑要比自动复杂一些，因为拖动的情况下我们既可以向左又可以向右进行拖动。并且当拖动结束的时候，显示窗口中会有两张图片，我们要根据面积来判断哪张图片显示，并且要把另一张图片也移动到窗口外。

首先我们要处理拖动事件，这个逻辑和我在拖动旋转 3D 的骰子效果一文中的逻辑是相同，我们对包含元素，也就是代码中的 .carousel 绑定一个 mousedown 事件，在其回调函数中绑定 mousemove 和 mouseup 事件。注意后两个事件要绑定到 document 上，因为我们即使拖动到元素外也是一个完整的 mousemove 行为，并且绑定到 document 上即使我们拖出浏览器外也依然能保持触发 mousemove 事件。

mousedown 事件我们只要做一件事就是记录用户点击的初始位置坐标，用 clientX（因为轮播是横向的，我们只需要判断 x 方向的移动距离）

mousemove 我们要处理图片的移动，这里我们需要将动画效果关闭。以一张图片的的宽度为一个单位，我们只需要知道一共滚过了几个单位，就知道当前显示图片的 index，然后在计算当前 index 的前一张和后一张就能够得到连续的效果。mousemove 回调函数如下：

let move = e => {
    let x = e.clientX - startX;

    //拖动的整数屏
    let current = index - (x - (x % 500)) / 500;

    for (let offset of [-1, 0, 1]) {
        //计算可能出现的图片下标
        let pos = current + offset;
        pos = (pos + children.length) % children.length; //要处理大屏幕拖动小于 -children.length 的情况

        children[pos].style.transition = 'none';
        children[pos].style.transform = `translateX(${-pos * 500 + offset * 500 + (x % 500)}px)`; //当前，前一个，后一个图片当前位置
    }
};

mouseup 是这里面逻辑稍微复杂的一个，当我们拖动停止的时候，视口里面会有两张图片（一般情况下）（x 为 e.clientX - startX，即从触发 mousedown 到 mouseup 水平方向一共移动了多少像素），我们要判断哪张图片所占面积比较大，让这张图片用动画移动到整个视口，而另一张图片用动画移出视口。这里我讲两种实现方式。

第一种是比较好理解，但是代码量比较大。我们可以用 (x - (x % 500)) / 500 得出一共滚动了多少个单位，index - (x - (x % 500)) / 500 这张图片在触发 mouseup 时必然在视口内，只是我们不确定它是要移出的还是要显示的，我们只需要分情况，用 if 判断一下 x % 500 的各种情况。

x % 500 的值就是页面滚动完整数个单位后多的部分，这部分如果超过一半的图片宽度，当前图片就要从视口移出；如果小于一半的图片宽度，当前图片就显示到视口中。同时我们还要判断视口中的另一张图片的移动方向，这里就不仅需要判断面积，同时需要判断是向左拖动还是向右拖动的。所以最后我们要 2 x 2 共四种情况。代码如下：

let up = e => {
    let x = e.clientX - startX;

    //index不变，向下取整，需要分情况，可读性好
    index = (index - (x - (x % 500)) / 500) % children.length;
    index = (index + children.length) % children.length;
    let base = x % 500;

    if (base > 0) {
        if (base > 250) {
            children[index].style.transition = '';
            children[index].style.transform = `translateX(${(-index + 1) * 500}px)`;
            let pre = index === 0 ? children.length - 1 : index - 1;
            children[pre].style.transition = '';
            children[pre].style.transform = `translateX(${-pre * 500}px)`;
            index = pre;
        } else {
            children[index].style.transition = '';
            children[index].style.transform = `translateX(${-index * 500}px)`;
            let pre = index === 0 ? children.length - 1 : index - 1;
            children[pre].style.transition = '';
            children[pre].style.transform = `translateX(${(-pre - 1) * 500}px)`;
        }
    }
    if (base < 0) {
        if (base < -250) {
            children[index].style.transition = '';
            children[index].style.transform = `translateX(${(-index - 1) * 500}px)`;
            let pre = index === 3 ? 0 : index + 1;
            children[pre].style.transition = '';
            children[pre].style.transform = `translateX(${-pre * 500}px)`;
            index = pre;
        } else {
            children[index].style.transition = '';
            children[index].style.transform = `translateX(${-index * 500}px)`;
            let pre = index === 3 ? 0 : index + 1;
            children[pre].style.transition = '';
            children[pre].style.transform = `translateX(${(-pre + 1) * 500}px)`;
        }
    }

    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', up);
};

上面的代码比较繁琐，其实我们可以将情况简化，我们可以利用 Math.round() 四舍五入求出 mouseup 触发以后要显示的图片（四舍五入后就不需要在特别判断哪个占的面积大了），现在我们要判断的就是另一张图片是前一张还是后一张即可。这个判断也是有规律的，我们利用 Math.abs() 和 Math.sign() 可以得出其值，Math.sign(base) 判断是向左还是向右拖动，Math.abs(base) 判断 base 是否超过一半，结合两者我们就能判断出是上一张还是下一张。代码如下：

let up = e => {
    let x = e.clientX - startX;

    //index 四舍五入，代码简洁，不易理解，主要是利用四舍五入，统一了要从可视范围移出的元素的下标
    index = (index - Math.round(x / 500)) % children.length;
    index = (index + children.length) % children.length; //四舍五入，得到的就是mouseup触发后应该显示的图片下标
    let base = x % 500;
    for (let offset of [0, (Math.abs(base) > 250 ? 1 : -1) * Math.sign(base)]) {
        let pos = (index + offset + children.length) % children.length; //获得另一个要移动的图片的下标（要移除可视范围的图片）
        children[pos].style.transition = '';
        children[pos].style.transform = `translateX(${(offset - pos) * 500}px)`; //一个下标为index图片要显示它的偏移量是 -index, 偏移量 -1 表示再向左移动一个图片单位，偏移量 1 表示向右移动一个图片单位，最后的总偏移量为 -index + offset
    }

    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', up);
};

这样代码也简单多了，不过要比上面那个难理解一点。理解的关键就是，同一个方向的移动，base 是否超过一半其 index 是不同的。

完整的代码查看：图片轮播效果

总结

轮播问题的主要逻辑就是我们不需要关注所有图片，不需要每次移动都要保持视口外的图片都在“正确”的位置，我们只需要关注几张与当前显示相关的图片即可。