0
我使用jqFancyTransitions.1.8（http://workshop.rs/projects/jqfancytransitions/）并启用导航。防止setInterval的重叠
我遇到的问题是，如果我通过图像点击垃圾邮件（或者只是点击提前或延迟），效果就会变得疯狂（特别是在窗帘效果上） - 这是因为javascript间隔重叠并且偏移只是不同步。
我试图编辑脚本来隐藏和重新显示导航时，没有运行转换，但我无法得到这个工作正常，导航会重新显示不同的时间间隔，也许我把代码放错了地点。
谁能帮我插入$（ '＃FT-按钮-slideshowHolder'）。节目（）& & $（ '＃FT-按钮-slideshowHolder'）。隐藏（）在正确的地方得到这个工作？
我也想知道是否有人使用这个已经有同样的问题和建造任何黑客或修复已经，或者如果有人能够向我提供我需要做一个快速解决发生的协助！
谢谢你这么社区！
（不是我的代码，只是美化，便于援助）...
/**
* 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,
opacity: 0,
'background-image': 'url(' + img[el.id][imgInc[el.id]] + ')'
});
$('#ft-' + el.id + itemId).animate({
height: opts[el.id].height,
opacity: 1
}, 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',
'top': params.height/2 - 15,
'right': 0,
'z-index': 1001,
'line-height': '30px',
'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), function (i, 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);
你似乎每一个新的人之前正确地做clearInterval。也许你需要停止转换 - 并清除另一个对象的间隔 – mplungjan 2011-05-23 13:16:09
如果你问我，那么代码急需进行大修。我很惊讶，这个插件不使用既不['.queue'（http://api.jquery.com/queue/）也不['.stop'（HTTP的：//api.jquery。 com/stop /）方法。如果我是你，我会寻找另一个插件。你有没有检出[jQuery UI效果]（http://jqueryui.com/docs/Effects）？ – mekwall 2011-05-23 14:04:01