DigsurGallery = {};
DigsurGallery.Rolling = function() {
this.change = null;
this.length = 0;
this.btn2length = 0;
this.btn1length = 0;
this.changeA = null;
this.changeB = null;
}
// 对象下的一个方法
DigsurGallery.Rolling.prototype.FadeInOut = function(name, arr, arr2, HasPaging) {
// ------------------ Haspaging Start --------------------- //
var _this = this;
if(HasPaging == true) {
var oDiv = $('#' + name);
var btn1 = $("<input type='button' id='btn1' value='1'>");
var btn2 = $("<input type='button' id='btn2' value='2'>");
oDiv.append(btn1);
oDiv.append(btn2);
var oUlPageOne = $("<ul id='test1'></ul>");
var oUlPageTwo = $("<ul id='test2'></ul>");
oDiv.append(oUlPageOne);
oDiv.append(oUlPageTwo);
$("#test2").css({
"display": "none",
"position": "relative",
"width": "100%",
"height": "100%",
});
$("#test1").css({
"position": "relative",
"width": "100%",
"height": "100%",
});
oDiv.find('ul').css("height", "100%");
for(var i = 0; i < arr.length; i++) {
var oli = $("<li></li>");
oUlPageOne.append(oli);
var oImg = $("<img />")
$(oImg).attr('src', arr[i]);
oli.append(oImg);
}
for(var i = 0; i < arr2.length; i++) {
var oli = $("<li></li>");
oUlPageTwo.append(oli);
var oImg = $("<img />")
$(oImg).attr('src', arr2[i]);
oli.append(oImg);
}
} else {
var oDiv = $('#' + name);
var oUl = $("<ul></ul>");
oDiv.append(oUl);
oDiv.find('ul').css("height", "100%");
for(var i = 0; i < arr.length; i++) {
var oli = $("<li></li>");
oUl.append(oli);
var oImg = $("<img />")
$(oImg).attr('src', arr[i]);
oli.append(oImg);
}
}
var lis = oDiv.find('li');
var Lisimgs = lis.find('img');
Lisimgs.css({
"width": "100%",
"height": "100%",
"box-shadow": "-5px 6px 11px #211f1f",
})
lis.css({
"display": "none",
"width": "100%",
"height": "100%",
"position": "absolute",
// "left": "15%",
// "top": "15%",
"float": "left",
});
lis.eq(0).css("display", "block");
// 定时器轮播
this.change = setInterval(function() {
this.length++;
// 判断 个数
if(this.length == arr.length) {
this.length = 0;
}
// 调用fadeIn、fadeOut方法
console.log("arr.length为："+arr.length);
console.log("this.length为："+this.length);
showaa(this.length);
}.bind(this), 2000);
function showaa(length) {
lis.eq(length - 1).fadeOut(1000); //将上一张图片隐藏
lis.eq(length).fadeIn(2000); //将这张图片出现
}
$("#btn1").click(function() {
clearInterval(_this.change);
clearInterval(_this.changeB);
_this.changeA = setInterval(function() {
_this.btn1length += 1;
console.log("btn1打印" + _this.btn1length);
}, 1000);
console.log("btn1获取当前i值" + _this.btn1length);
})
$("#btn2").click(function() {
clearInterval(_this.change);
clearInterval(_this.changeA);
_this.changeB = setInterval(function() {
_this.btn2length += 1;
console.log("btn2打印" + _this.btn2length);
}, 1000);
console.log("btn2获取当前i值" + _this.btn2length);
})
}
现在的问题是：
1：当我的Haspage 为true 时，轮播走到arr.length时就不走动了。
2：点击btn的时候，也是不走动，而且，轮播速度加快（console发现的加快）
嗯，谢谢大家，帮我看一下，谢谢谢谢。我对封装这一块很是迷茫，补了好几天还是不太会，帮我看看怎么写，教我一下，不胜感激。
你每次点击的时候 都会加快计时器的循环速度 开启计时器一般都在前方加个清除计时器方法，以免遇到楼主遇到的问题，
还有“定时轮播中”的this 你应该用错了，这应该是直接导致无法循环的原因。
至于 Lis “图片集合”你可以在showaa方法中打印一下 console.log(lis.eq(length - 1))是否是存在的
以上应该是能帮助你解决现在的问题的。不懂继续交流哈
是在for循环时出错的吗？那就输出日志看看循环到哪一步不动了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>封装函数</title>
</head>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
.FadeInShuffling{width: 100%;margin: 0 auto;border: 1px solid black;height:200px;position: relative;}
</style>
<body>
<div id="page1" class="page FadeInShuffling"></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
DigsurGallery = {};
DigsurGallery.Rolling = function() {
this.change = null;
this.length = 0;
this.btn2length = 0;
this.changeB = null;
}
// 对象下的一个方法
DigsurGallery.Rolling.prototype.FadeInOut = function(name, arr, arr2, HasPaging) {
var _this = this;
if(HasPaging == true) {
var oDiv = $('#' + name);
var btn1 = $("<input type='button' id='btn1' value='1'>");
var btn2 = $("<input type='button' id='btn2' value='2'>");
oDiv.append(btn1);
oDiv.append(btn2);
var oUlPageOne = $("<ul id='test1'></ul>");
var oUlPageTwo = $("<ul id='test2'></ul>");
oDiv.append(oUlPageOne);
oDiv.append(oUlPageTwo);
$("#test2").css({
"display": "none",
"position": "relative",
"margin": "0 auto",
"width": "100%",
"height": "100%",
});
$("#test1").css({
"position": "relative",
"margin": "0 auto",
"width": "100%",
"height": "100%",
});
oDiv.find('ul').css("height", "100%");
for(var i = 0; i < arr.length; i++) {
var oli = $("<li></li>");
oUlPageOne.append(oli);
var oImg = $("<img />")
$(oImg).attr('src', arr[i]);
oli.append(oImg);
}
for(var i = 0; i < arr2.length; i++) {
var oli = $("<li></li>");
oUlPageTwo.append(oli);
var oImg = $("<img />")
$(oImg).attr('src', arr2[i]);
oli.append(oImg);
}
} else {
var oDiv = $('#' + name);
var oUl = $("<ul></ul>");
oDiv.append(oUl);
oDiv.find('ul').css("height", "100%");
for(var i = 0; i < arr.length; i++) {
var oli = $("<li></li>");
oUl.append(oli);
var oImg = $("<img />")
$(oImg).attr('src', arr[i]);
oli.append(oImg);
}
}
var lis = oDiv.find('li');
var Lisimgs = lis.find('img');
Lisimgs.css({
"width": "100%",
"height": "100%",
"box-shadow": "-5px 6px 11px #211f1f",
})
lis.css({
"display": "none",
"width": "70%",
"height": "70%",
"position": "absolute",
"left": "15%",
"top": "15%",
"float": "left",
});
$("#test1 li").eq(0).css("display", "block");
$("#test2 li").eq(0).css("display", "block");
// 定时器轮播
function Testmove() {
console.log(_this);
_this.change = setInterval(function() {
_this.length++;
// 判断 个数
if(_this.length == arr.length) {
_this.length = 0;
}
console.log(_this.length);
showaa(_this.length, 'test1');
}, 2000);
}
Testmove();
$("#btn1").click(function() {
console.log(_this.length);
$("#test2").toggle();
$("#test1").toggle();
clearInterval(_this.changeB);
Testmove();
})
$("#btn2").click(function() {
$("#test1").toggle();
$("#test2").toggle();
clearInterval(_this.change);
_this.changeB = setInterval(function() {
_this.btn2length += 1;
if(_this.btn2length == arr2.length) {
_this.btn2length = 0;
}
showaa(_this.btn2length, 'test2');
}, 2000);
})
function showaa(length, id) {
$("#" + id + " li").eq(length - 1).fadeOut(1000); //将上一张图片隐藏
$("#" + id + " li").eq(length).fadeIn(2000); //将这张图片出现
}
var FadeIn1 = new DigsurGallery.Rolling();
var arr = ["Image/1.jpg", "Image/2.jpg", "Image/3.jpg", "Image/4.jpg", "Image/5.jpg", "Image/6.jpg", "Image/7.jpg"];
var arr2 = ["Image/7.jpg", "Image/6.jpg", "Image/5.jpg", "Image/4.jpg", "Image/3.jpg", "Image/2.jpg", "Image/1.jpg"];
FadeIn1.FadeInOut('page1',arr,arr2,true);
}
</script>