利用jQuery实现轮播图

序：

我的上篇博客实现了用纯原生js实现轮播图戳这里，这篇再用jquery实现一下。

原理：

一行多个，水平移动，截取显示，通过left控制移动

效果：

其实按钮的样式还可以进一步美化一下的，我这里只实现一下效果

代码：

可以去这里看完整的代码：
git地址
心情好的话给我的star吧

这里只贴一下js的部分关键代码：

//向右
    $("#right").click(function () {
        var st = $(".wrap")[0].style.left;
        var ind = parseInt(st.split('p')[0]);
        if (ind < -1800) {

            $(".wrap").animate({ left: "-1200px" }, "fast");
            ind = -1200;
        } else {
            $(".wrap").animate({ left: "-=600px" }, "fast");
            ind -= 600;
        }

        btnsHeight(ind);

    })
    //向左
    $("#left").click(function () {
        var st = $(".wrap")[0].style.left;
        var ind = parseInt(st.split('p')[0]);

        if (ind > -600) {

            $(".wrap").animate({ left: "-1200px" }, "fast");
            ind = -1200;
        } else {
            $(".wrap").animate({ left: "+=600px" }, "fast");
            ind += 600;
        }

        btnsHeight(ind);

    })
    //切换按钮
    $(".btns button").click(function (e) {

        var loc = -600 * $(this)[0].id + "px";

        //按钮颜色改变 
        $(this)[0].style.color = "pink";

        for (let i = 0; i < $(".btns button").length; i++) {
            if ($(".btns button")[i] != $(this)[0]) {
                $(".btns button")[i].style.color = "black";
            }
        }

        //移动滑块
        $(".wrap").animate({ left: loc }, "fast");

    })