JS封装问题，来个大哥帮忙。

Question

下面的怎么用JQ写，不用JS写，谢谢~

 // 创建一个对象
FadeInShuffling = {};
FadeInShuffling.show = function() {
    this.speed = 1;
    this.timer = null;
}
FadeInShuffling.show.prototype.BtnSlider = function(a, arr, BtnBool) {
    var oName = document.getElementById(a);
    var obox = document.createElement("div");
    oName.appendChild(obox);
    obox.id = "box";
    var content = document.createElement("div");
    content.id = "content";
    for(var i = 0; i < arr.length; i++) {
        var oimg = document.createElement("img");
        oimg.src = arr[i];
        content.appendChild(oimg);
    }
    obox.appendChild(content);
    $("#box").css("height", $(window).width() * 0.35);
    var boxOW = obox.offsetWidth;
    $("#box img").css("margin-right", boxOW / 100 * 3);
    console.log($("#box img").css("margin-right"));
    var page3IML = parseFloat($("#content img").css('marginRight'));
    $("#content img").css("width", boxOW);

    content.style.width = arr.length * (boxOW + page3IML) + 'px';
    speed = 1;
    var _this = this;

    function move() {
        _this.timer = setInterval(function() {
            content.style.left = content.offsetLeft - speed + 'px';
            if(content.offsetLeft < (arr.length - 1) * (oimg.offsetWidth + page3IML) * -1) {
                content.style.left = 0 + 'px';
            }
            console.log("第三页定时器");
        }, 1)
    }
    move();

    box.onmouseover = function() {
        clearInterval(_this.timer);
    }
    box.onmouseout = function(e) {
        console.log(1);
        move();
    }

    if(BtnBool == true) {
        var oRetreat = document.createElement("div");
        obox.appendChild(oRetreat);
        oRetreat.id = "retreat";
        var oAdvance = document.createElement("div");
        obox.appendChild(oAdvance);
        oAdvance.id = "advance";
        $("#retreat").css({
            "position": "absolute",
            "left": 0,
            "top": "30%",
            "width": "8%",
            "height": "40%",
            "background-color": "rgba(0, 0, 0, 0.3)",
            "text-align": "center",
        });
        $("#advance").css({
            "position": "absolute",
            "right": 0,
            "top": "30%",
            "width": "8%",
            "height": "40%",
            "background-color": "rgba(0, 0, 0, 0.3)",
            "text-align": "center",
        });

        oRetreat.onclick = function() {
            var index = parseInt(content.offsetLeft / -oimg.offsetWidth);
            index--;
            if(index < 0) {
                index = arr.length - 1;
            }
            var temp = (oimg.offsetWidth + page3IML) * index * -1;
            content.style.left = temp + 'px';
        };

        oAdvance.onclick = function() {
            var index = parseInt(content.offsetLeft / -oimg.offsetWidth);
            index++;
            if(index >= arr.length) {
                index = 0;
            }
            var temp = (oimg.offsetWidth + page3IML) * index * -1;
            content.style.left = temp + 'px';
        };
    }

}

我想弄成下面行的调用方法

```var mySwiper = new Swiper('.swiper-container', {
autoplay: 5000,//可选选项，自动滑动
})

Answer 1

大概就这个样子吧

    // 创建一个对象
    FadeInShuffling = {};
    //config==>{arr:arr,BtnBool:true/false}
    FadeInShuffling.show = function (a,config) {
        this.speed = 1;
        this.timer = null;
        this.a = a;/////////////
        this.config = config;////////
        this.BtnSlider();//直接调用BtnSlider初始化UI，BtnSlider改为initUI还好点
    }
    FadeInShuffling.show.prototype.BtnSlider = function () {
        var oName = document.getElementById(this.a);////////////
        var obox = document.createElement("div");
        oName.appendChild(obox);
        obox.id = "box";
        var content = document.createElement("div");
        content.id = "content";
        for (var i = 0; i < this.config.arr.length; i++) {///////
            var oimg = document.createElement("img");
            oimg.src = this.config.arr[i];////////////
            content.appendChild(oimg);
        }
        obox.appendChild(content);
        $("#box").css("height", $(window).width() * 0.35);
        var boxOW = obox.offsetWidth;
        $("#box img").css("margin-right", boxOW / 100 * 3);
        console.log($("#box img").css("margin-right"));
        var page3IML = parseFloat($("#content img").css('marginRight'));
        $("#content img").css("width", boxOW);

        content.style.width = this.config.arr.length * (boxOW + page3IML) + 'px';////////////////
        speed = 1;
        var _this = this;

        function move() {
            _this.timer = setInterval(function () {
                content.style.left = content.offsetLeft - speed + 'px';
                if (content.offsetLeft < (_this.config.arr.length - 1) * (oimg.offsetWidth + page3IML) * -1) {
                    content.style.left = 0 + 'px';
                }
                console.log("第三页定时器");
            }, 1)
        }
        move();
        $(box).mouseenter(function () { clearInterval(_this.timer); }).mouseleave(function () { move()})
       /* box.onmouseover = function () {
            clearInterval(_this.timer);
        }
        box.onmouseout = function (e) {
            console.log(1);
            move();
        }
        */
        if (this.BtnBool == true) {//////
            var oRetreat = document.createElement("div");
            obox.appendChild(oRetreat);
            oRetreat.id = "retreat";
            var oAdvance = document.createElement("div");
            obox.appendChild(oAdvance);
            oAdvance.id = "advance";
            $("#retreat").css({
                "position": "absolute",
                "left": 0,
                "top": "30%",
                "width": "8%",
                "height": "40%",
                "background-color": "rgba(0, 0, 0, 0.3)",
                "text-align": "center",
            });
            $("#advance").css({
                "position": "absolute",
                "right": 0,
                "top": "30%",
                "width": "8%",
                "height": "40%",
                "background-color": "rgba(0, 0, 0, 0.3)",
                "text-align": "center",
            });

            oRetreat.onclick = function () {
                var index = parseInt(content.offsetLeft / -oimg.offsetWidth);
                index--;
                if (index < 0) {
                    index = _this.config.arr.length - 1;//////////////////////
                }
                var temp = (oimg.offsetWidth + page3IML) * index * -1;
                content.style.left = temp + 'px';
            };

            oAdvance.onclick = function () {
                var index = parseInt(content.offsetLeft / -oimg.offsetWidth);
                index++;
                if (index >= _this.config.arr.length) {///////////
                    index = 0;
                }
                var temp = (oimg.offsetWidth + page3IML) * index * -1;
                content.style.left = temp + 'px';
            };
        }

    }


    var myShow = new FadeInShuffling.show('aaa', { arr: [1, 2, 3], BtnBool: true });
    //可以通过myShow调用FadeInShuffling.show实例其他方法