原生js实现轮播图效果

实现后的效果（Gif图片）
直接复制代码到一个新的Html页面即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slide</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .slide_show_view {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        margin: 0 auto;
        margin-top: 200px;
        position: relative;
        overflow: hidden;
    }

    .slide_show_list {
        list-style: none;
        position: absolute;
        left: 0px;
        width: 1200px;
        height: 100px;
        display: flex;
    }

    .slide_show_list li {
        width: 200px;
        height: 100px;
        background-color: rgba(105, 90, 205, 0.363);
        line-height: 100px;
        text-align: center;
        font-size: 34px;
        font-weight: 800;
        color: #fff;
    }
</style>

<body>
    <!-- 类似相框的作用 -->
    <div class="slide_show_view">
        <!-- 轮播图盒子,里面li的数量决定了这个盒子的宽度 -->
        <ul class="slide_show_list" id="slideShowList">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

<script>
    // 获取轮播图盒子
    const slideBox = document.getElementById('slideShowList');
    // 获取所有轮播图的图片(这里直接用li代替)
    const slideItemList = slideBox.getElementsByTagName('li');
    // 复制第一个图片
    const firstSlideItem = slideItemList[0].cloneNode(true);
    // 将复制的第一张图添加到这个图片列表的最后面
    slideBox.appendChild(firstSlideItem);
    // 定义初始值(轮播图盒子在相框中的偏移量)
    let leftNumber = 0;
    // 定义移动一个图片的函数
    function slide() {
        // 记录移动次数
        let sum = 0;
        const timer = setInterval(() => {
            // 每次移动10px的偏移量
            leftNumber += 10;
            // 记录当前移动次数
            sum++;
            // 移动盒子
            slideBox.style.left = `-${leftNumber}px`;
            // 一个图片的宽度是200,每次移动10,需要移动二十次才相当于轮播了一个图片
            // 所以在移动次数到达20次的时候,清除这个定时器
            if (sum === 20) {
                clearInterval(timer);
            }
            // 定时器的时间为50ms执行一次,
            // 实现的效果是一秒轮播一个图片。所以 1000ms / 20(移动次数) = 50ms
        }, 50)
    }
    // 定义定时器，每2s执行一次移动函数，因为图片移动200需要1s，所以这里要超过1s才可以
    setInterval(() => {
        slide();
        // 每次移动完轮播图后判断偏移量,如果当前显示到第最后一个复制的图片,直接把偏移量重置,轮播图盒子重置即可
        setTimeout(() => {
            if (leftNumber === 1000) {
                slideBox.style.left = `0px`;
                leftNumber = 0;
            }
            // 这里的1100只要在1s - 2s之间都可以
        }, 1100)
    }, 2000);

</script>

</html>
最后编辑于：2019.11.07 01:17:58