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

我的问题

网络上目前找到的解决方式都是全屏轮播，让所有待播放图片按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);

网上的轮播图放到需要的div容器里面不就好了？
自己写的话给容器添加mouseenter和mouseleave事件，进入清除timer，离开重新开启计时器，示例代码如下

<div>
    <div class="history">history1</div>
    <div class="history">history2</div>
    <div class="history">history3</div>
</div>
<div class="left-arrow">left-arrow</div>
<script>
    //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';
    }


////////////////////////////给容器添加事件，清除或者重启计时器
    var pNode = hisBox[0].parentNode;
    pNode.onmouseleave = pNode.onmouseenter = function (e) {
        if (e.type == 'mouseenter') clearInterval(timer)
        else timer = setInterval(hisSlideShow, 5000);
    }

    timer = setInterval(hisSlideShow, 5000);
</script>

有其他问题可以继续交流~

肯定可以的，只要通过按钮删除定时器（timer）就可以了，

clearInterval(timer);

点击继续运行再次调用hisSlideShow方法。

可以搜索swper插件直接使用，当然也可以参考源码