jquery幻灯片卡住了

Question

我创建了一个jQuery画布幻灯片，用于在运行幻灯片时应用图像过滤器。一切似乎都运行正常，但当我将滤镜应用于图像时，幻灯片放映不会加载其他幻灯片并继续加载相同的幻灯片。

要查看问题，请点击以下链接：

http://mi-linux.wlv.ac.uk/~0819487/MySlider/mySlider.html

你们可以给予任何帮助，我们将不胜感激。

Answer 1

pixastic正在替换您应用过滤器时的#canvas元素。因此，您的canvas和context变量引用的是不再位于页面中的对象。基本上，您需要在应用过滤器后重置这两个变量。

要获得最简单的修复，您需要在context方法中将document.getElementById("canvas").getContext("2d")替换为drawImg。这将使图像保持旋转。但是图像更改后将不再应用滤镜。为此，您需要在绘制重新分配的图像后调用相关的过滤器功能。

Answer 2

谢谢它的效果，但是在幻灯片过渡后屏幕亮度降低了，所以我做了一点改变，让它正常工作。


drawImg = function(src){
jQuery('#canvas').fadeOut(500,function(){
img.src = src;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.drawImage(img, posX, posY);
if (jQuery('#canvas').is(":hidden")){
jQuery('#canvas').fadeIn(500);
polarize();
}
});
}


再次感谢你的帮助我真的陷入了这个问题，现在我又得到了另一个问题，如果你可以帮助我，那就是过滤图像的持久性，比如我想用过滤后的图像覆盖相同的图像。

此致

Answer 3

您是否考虑过使用像the Nivo slider这样的功能，这些功能在功能上非常昂贵并得到很好的支持？