[英]My slider doesn't work as it should after viewing 3 “screens”
I'm trying to build slider and in the first 3 "screens" it work and in the last one is doesn't. 我正在尝试构建滑块,并且在前三个“屏幕”中可以正常工作,而在最后一个“屏幕”中却没有。 Also, is there a way to make the slider to slide and not just to show up? 另外,有没有一种方法可以使滑块滑动而不只是显示?
the js code: js代码:
var oldnum = 0
var screen = 1;
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
$("#left_arrow").click(function () {
screen--;
if (screen <= 1) {
$("#left_arrow").hide();
screen = 1;
} else {
gotoleft(screen);
}
});
jwerty.key('arrow-right', function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
jwerty.key('arrow-left', function () {
screen--;
if (screen <= 1) {
$("#left_arrow").hide();
screen = 1;
} else {
gotoleft(screen);
}
});
function gotoright(num) {
if (num <= 0 && num >= 4) {
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {});
} else {
oldnum = num - 1;
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {
$("#b_" + oldnum).hide().css({
"opacity": 0
});
});
}
}
function gotoleft(num) {
if (num <= 0 && num >= 4) {
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {});
} else {
oldnum = num + 1;
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {
$("#b_" + oldnum).hide().css({
"opacity": 0
});
});
}
}
here is the full code with the html and css: http://jsfiddle.net/k6xdq/1/ 这是带有html和css的完整代码: http : //jsfiddle.net/k6xdq/1/
I want that it will work like http://tobiasahlin.com/spinkit/ 我希望它能像http://tobiasahlin.com/spinkit/
I think you should check if screen is == 4 before you ++ it. 我认为您应该先检查屏幕是否为== 4,然后再对其进行++处理。
Right now you go from 3 to 4 then go to an if statement that only hides the arrow. 现在,您从3转到4,然后转到仅隐藏箭头的if语句。
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
What you want is to gotoright() and if screen is >= 4, hide() it. 您想要的是gotoright(),如果屏幕> = 4,则hide()。
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
gotoright(screen);
} else {
gotoright(screen);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.