下面的怎么用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,//可选选项，自动滑动
})
大概就这个样子吧
// 创建一个对象
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实例其他方法
首先 构造函数 在函数内传入2个参数 一个是 ID 一个是obj即你的配置 然后在这个对象原型上写上你的这些方法，需要用到配置的使用this访问最后new 的时候传需要的参数