普通网友 2017-07-21 02:42 采纳率: 52.6%
浏览 765
已采纳

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

下面的怎么用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,//可选选项,自动滑动
})



  • 写回答

2条回答 默认 最新

  • Go 旅城通票 2017-07-21 03:05
    关注

    大概就这个样子吧

    
        // 创建一个对象
        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实例其他方法
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗