如何解决防止SetInterval重叠
| 我正在使用jqFancyTransitions.1.8（http://workshop.rs/projects/jqfancytransitions/）并启用了导航。 我的问题是，如果我在垃圾邮件中点击图片（或只是点击到太早或太晚），效果就会变得很疯狂（尤其是在幕帘效果上）-这是因为javascript间隔重叠并且偏移量刚好消失了同步。 我尝试编辑脚本以在过渡未运行时隐藏并重新显示导航，但是我无法使其正常工作，并且导航将以不同的间隔重新显示，也许是我将代码放置在错误的位置。 谁能帮我在正确的位置插入$（\'＃ft-buttons-slideshowHolder \'）。show（）&& $（\ ##-buttons-slideshowHolder \'）。hide（）以使其正常工作吗？ 我还想知道是否有人使用过这个问题并且已经构造了任何hack或修复程序，或者是否有人能够为我提供快速修复所需的帮助！ 谢谢SO社区！！ （不是我的代码，只是为了方便帮助而美化了）.../**
* jqFancyTransitions - jQuery plugin
* @version: 1.8 (2010/06/13)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://www.workshop.rs/projects/jqfancytransitions
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.PHP
* http://www.gnu.org/licenses/gpl.html
**/
(function ($) {
var opts = new Array;
var level = new Array;
var img = new Array;
var links = new Array;
var titles = new Array;
var order = new Array;
var imgInc = new Array;
var inc = new Array;
var stripInt = new Array;
var imgInt = new Array;
$.fn.jqFancyTransitions = $.fn.jqfancytransitions = function (options) {
init = function (el) {
opts[el.id] = $.extend({},$.fn.jqFancyTransitions.defaults,options);
img[el.id] = new Array();
links[el.id] = new Array();
titles[el.id] = new Array();
order[el.id] = new Array();
imgInc[el.id] = 0;
inc[el.id] = 0;
params = opts[el.id];
if (params.effect == \'zipper\') {
params.direction = \'alternate\';
params.position = \'alternate\';
}
if (params.effect == \'wave\') {
params.direction = \'alternate\';
params.position = \'top\';
}
if (params.effect == \'curtain\') {
params.direction = \'alternate\';
params.position = \'curtain\';
}
stripwidth = parseInt(params.width / params.strips);
gap = params.width - stripwidth * params.strips;
stripLeft = 0;
$.each($(\'#\' + el.id + \' img\'),function (i,item) {
img[el.id][i] = $(item).attr(\'src\');
links[el.id][i] = $(item).next().attr(\'href\');
titles[el.id][i] = $(item).attr(\'alt\') ? $(item).attr(\'alt\') : \'\';
$(item).hide();
});
$(\'#\' + el.id).css({
\'background-image\': \'url(\' + img[el.id][0] + \')\',\'width\': params.width,\'height\': params.height,\'position\': \'relative\',\'background-position\': \'top left\'
});
$(\'#\' + el.id).append(\"<div class=\'ft-title\' id=\'ft-title-\" + el.id + \"\' style=\'position: absolute; bottom:0; left: 0; z-index: 1; color: #fff; background-color: #000; \'>\" + titles[el.id][0] + \"</div>\");
if (titles[el.id][imgInc[el.id]]) $(\'#ft-title-\' + el.id).css(\'opacity\',opts[el.id].titleOpacity);
else $(\'#ft-title-\' + el.id).css(\'opacity\',0);
if (params.navigation) {
$.navigation(el);
$(\'#ft-buttons-\' + el.id).children().first().addClass(\'ft-button-\' + el.id + \'-active\');
}
odd = 1;
for (j = 1; j < params.strips + 1; j++) {
if (gap > 0) {
tstripwidth = stripwidth + 1;
gap--;
} else {
tstripwidth = stripwidth;
}
if (params.links) $(\'#\' + el.id).append(\"<a href=\'\" + links[el.id][0] + \"\' class=\'ft-\" + el.id + \"\' id=\'ft-\" + el.id + j + \"\' style=\'width:\" + tstripwidth + \"px; height:\" + params.height + \"px; float: left; position: absolute;outline:none;\'></a>\");
else $(\'#\' + el.id).append(\"<div class=\'ft-\" + el.id + \"\' id=\'ft-\" + el.id + j + \"\' style=\'width:\" + tstripwidth + \"px; height:\" + params.height + \"px; float: left; position: absolute;\'></div>\");
$(\"#ft-\" + el.id + j).css({
\'background-position\': -stripLeft + \'px top\',\'left\': stripLeft
});
stripLeft += tstripwidth;
if (params.position == \'bottom\') $(\"#ft-\" + el.id + j).css(\'bottom\',0);
if (j % 2 == 0 && params.position == \'alternate\') $(\"#ft-\" + el.id + j).css(\'bottom\',0);
if (params.direction == \'fountain\' || params.direction == \'fountainAlternate\') {
order[el.id][j - 1] = parseInt(params.strips / 2) - (parseInt(j / 2) * odd);
order[el.id][params.strips - 1] = params.strips;
odd *= -1;
} else {
order[el.id][j - 1] = j;
}
}
$(\'.ft-\' + el.id).mouSEOver(function () {
opts[el.id].pause = true;
});
$(\'.ft-\' + el.id).mouSEOut(function () {
opts[el.id].pause = false;
});
$(\'#ft-title-\' + el.id).mouSEOver(function () {
opts[el.id].pause = true;
});
$(\'#ft-title-\' + el.id).mouSEOut(function () {
opts[el.id].pause = false;
});
clearInterval(imgInt[el.id]);
imgInt[el.id] = setInterval(function () {
$.transition(el)
},params.delay + params.stripDelay * params.strips);
};
$.transition = function (el,direction) {
if (opts[el.id].pause == true) return;
stripInt[el.id] = setInterval(function () {
$.strips(order[el.id][inc[el.id]],el)
},opts[el.id].stripDelay);
$(\'#\' + el.id).css({
\'background-image\': \'url(\' + img[el.id][imgInc[el.id]] + \')\'
});
if (typeof (direction) == \"undefined\") imgInc[el.id]++;
else if (direction == \'prev\') imgInc[el.id]--;
else imgInc[el.id] = direction;
if (imgInc[el.id] == img[el.id].length) {
imgInc[el.id] = 0;
}
if (imgInc[el.id] == -1) {
imgInc[el.id] = img[el.id].length - 1;
}
if (titles[el.id][imgInc[el.id]] != \'\') {
$(\'#ft-title-\' + el.id).animate({
opacity: 0
},opts[el.id].titleSpeed,function () {
$(this).html(titles[el.id][imgInc[el.id]]).animate({
opacity: opts[el.id].titleOpacity
},opts[el.id].titleSpeed);
});
} else {
$(\'#ft-title-\' + el.id).animate({
opacity: 0
},opts[el.id].titleSpeed);
}
inc[el.id] = 0;
buttons = $(\'#ft-buttons-\' + el.id).children();
buttons.each(function (index) {
if (index == imgInc[el.id]) {
$(this).addClass(\'ft-button-\' + el.id + \'-active\');
} else {
$(this).removeClass(\'ft-button-\' + el.id + \'-active\');
}
});
if (opts[el.id].direction == \'random\') $.fisherYates(order[el.id]);
if ((opts[el.id].direction == \'right\' && order[el.id][0] == 1) || opts[el.id].direction == \'alternate\' || opts[el.id].direction == \'fountainAlternate\') order[el.id].reverse();
};
$.strips = function (itemId,el) {
temp = opts[el.id].strips;
if (inc[el.id] == temp) {
clearInterval(stripInt[el.id]);
return;
}
$(\'.ft-\' + el.id).attr(\'href\',links[el.id][imgInc[el.id]]);
if (opts[el.id].position == \'curtain\') {
currWidth = $(\'#ft-\' + el.id + itemId).width();
$(\'#ft-\' + el.id + itemId).css({
width: 0,opacity: 0,\'background-image\': \'url(\' + img[el.id][imgInc[el.id]] + \')\'
});
$(\'#ft-\' + el.id + itemId).animate({
width: currWidth,opacity: 1
},1000);
} else {
$(\'#ft-\' + el.id + itemId).css({
height: 0,\'background-image\': \'url(\' + img[el.id][imgInc[el.id]] + \')\'
});
$(\'#ft-\' + el.id + itemId).animate({
height: opts[el.id].height,1000);
}
inc[el.id]++;
};
$.navigation = function (el) {
$(\'#\' + el.id).append(\"<a href=\'#\' id=\'ft-prev-\" + el.id + \"\' class=\'ft-prev\'>Prev</a>\");
$(\'#\' + el.id).append(\"<a href=\'#\' id=\'ft-next-\" + el.id + \"\' class=\'ft-next\'>Next</a>\");
$(\'#ft-prev-\' + el.id).css({
\'position\': \'absolute\',\'top\': params.height / 2 - 15,\'left\': 0,\'z-index\': 1001,\'line-height\': \'30px\',\'opacity\': 0.7
}).click(function (e) {
e.preventDefault();
$.transition(el,\'prev\');
clearInterval(imgInt[el.id]);
imgInt[el.id] = setInterval(function () {
$.transition(el)
},params.delay + params.stripDelay * params.strips);
});
$(\'#ft-next-\' + el.id).css({
\'position\': \'absolute\',\'right\': 0,\'opacity\': 0.7
}).click(function (e) {
e.preventDefault();
$.transition(el);
clearInterval(imgInt[el.id]);
imgInt[el.id] = setInterval(function () {
$.transition(el)
},params.delay + params.stripDelay * params.strips);
});
$(\"<div id=\'ft-buttons-\" + el.id + \"\'></div>\").insertAfter($(\'#\' + el.id));
$(\'#ft-buttons-\' + el.id).css({
\'text-align\': \'right\',\'padding-top\': 5,\'width\': opts[el.id].width
});
for (k = 1; k < img[el.id].length + 1; k++) {
$(\'#ft-buttons-\' + el.id).append(\"<a href=\'#\' class=\'ft-button-\" + el.id + \"\'>\" + k + \"</a>\");
}
$(\'.ft-button-\' + el.id).css({
\'padding\': 5
});
$.each($(\'.ft-button-\' + el.id),item) {
$(item).click(function (e) {
e.preventDefault();
$.transition(el,i);
clearInterval(imgInt[el.id]);
imgInt[el.id] = setInterval(function () {
$.transition(el)
},params.delay + params.stripDelay * params.strips);
})
});
}
$.fisherYates = function (arr) {
var i = arr.length;
if (i == 0) return false;
while (--i) {
var j = Math.floor(Math.random() * (i + 1));
var tempi = arr[i];
var tempj = arr[j];
arr[i] = tempj;
arr[j] = tempi;
}
}
this.each(function () {
init(this);
});
};
$.fn.jqFancyTransitions.defaults = {
width: 500,height: 332,strips: 10,delay: 5000,stripDelay: 50,titleOpacity: 0.7,titleSpeed: 1000,position: \'alternate\',direction: \'fountainAlternate\',effect: \'\',navigation: false,links: false
};
})(jQuery);
解决方法
我同意Marcus-该代码非常需要大修，我将寻找替代方法。我建议对使用相同库遇到相同问题的任何人都建议这样做，因为此版本并不完全“稳定”
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
