请问如何用js实现轮播图效果？

Question

我的问题

网络上目前找到的解决方式都是全屏轮播，让所有待播放图片按float布局排成一行，通过改变图片的x坐标实现轮播。请问有没有什么更好的解决方法，或者我要在某个特定的div区域里实现轮播图，按照坐标改变的方法实现，我该如何得到合适的x轴y轴坐标来实现图片轮播？

目前我使用了timer来定时设置图片的display属性自动进行轮播，能否在我的现有的基础上添加按钮点击事件控制图片的播放呢，比如鼠标移入暂停，点击切换图片

我目前的代码

//index1：索引， len1：长度
    var index1 = 0, len1, timer;
    // 类似获取一个元素数组
    var hisBox = document.getElementsByClassName("history");
    //获取容器
    var count = document.getElementsByClassName("left-arrow");
    len1 = hisBox.length;
    hisBox[index1].style.display = 'block';
    for(var i=1; i<len1; i++) {
        hisBox[i].style.display = 'none';
    }

    // 逻辑控制函数
    function hisSlideShow() {
        index1 ++;
        // 防止数组溢出
        if(index1 >= len1) index1 = 0;
        // 遍历每一个元素
        for(var i=0; i<len1; i++) {
            hisBox[i].style.display = 'none';
        }
        // 每次只有一张图片显示
        hisBox[index1].style.display = 'block';
    }

    timer = setInterval(hisSlideShow, 5000);

Answer 1

这是我面试比较喜欢问的问题，哈哈哈哈哈，其实我也没有完整的写过一个swiper，但是参考成熟的一些轮子，确实没有什么坏处。有两点可以参考一下。
1.定时器推荐rAF，好控制时间，做好位移的处理，因为可能会出现累计位移超过既定尺寸。同时rAF还能更好的控制位移结束后重新开始计算等待时间，并且方便做无限循环。
2.推荐使用transform来控制移动，配合will-change，就非常的专业。
3.干脆直接将tween动画整合进来，更方便了

Answer 2

这种功能有很成熟的库，比如 swiper.js，建议直接使用。如果想学习，也可以从这种流行、成熟的开源库入手。

Answer 3

轮播图更简单快捷的方式可以用bootstrap的css轮播类。可以学习尝试一下