我正在使用jqFancyTransitions.1.8（http://workshop.rs/projects/jqfancytransitions/）并启用导航。
我遇到的问题是，如果我垃圾邮件点击图片（或者只是点击早期或者太晚），效果就会变得疯狂（特别是在幕布效果上） - 这是因为javascript间隔重叠而且偏移只是不同步。
我尝试编辑脚本以在转换未运行时隐藏和重新显示导航，但我无法正常工作，并且导航将以不同的间隔重新显示，也许我将代码放在错误的位置
任何人都可以帮我插入$（'＃ft-buttons-slideshowHolder'）。show（）＆amp;＆amp; $（'＃ft-buttons-slideshowHolder'）。hide（）在正确的位置让它工作？
我还想知道是否有人使用此问题并且已经构建了任何黑客或修复程序，或者是否有人能够为我提供快速修复所需的帮助！
谢谢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,
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);
答案 0 :(得分：0)
我同意马库斯 - 代码急需大修，我将寻找替代方案。我对同一个库遇到同样问题的人提出同样的建议，因为这个版本并不完全“稳定”