JQuery图库非function性淡入淡出效果

这是一个简单的图片库脚本，用于淡入和淡出具有背景图像的div。 它很慢而且工作不正常。

• 看起来所有图像都会出现并消失在一起而没有任何动画

• 这个图库应该将每个图像淡入下一个图像

  function gallery() { timerp = window.setInterval(function() { $('.cornerimg').fadeOut(2000); if ($('.cornerimg:visible') == $('.cornerimg').last()) { $('.cornerimg').first().fadeIn(2000); } else { $('.cornerimg').next().fadeIn(2000); }; }, 6000); } } 

有什么想法吗？

Answer 1

next()只找到选择器的下一个兄弟。 它不会跟踪你的位置。 我会做一个setInterval并传递当前索引。 例如：

 function gallery() { ind = 0; l = $('.cornerimg').length; $('.cornerimg').fadeOut(500); window.setInterval( function() { if ( ind > 0 ) $('.cornerimg').eq(ind-1).fadeOut(2000); if (ind == l) { ind = 0; } $('.cornerimg').eq(ind).fadeIn(500); ind++; }, 2000 ); } $(function() { gallery() }); 

为了避免元素移位，将函数添加为fadeOut的回调，而不是异步发生。

注意：全局变量一般不是最好的方法，只是为了给你一个想法。 更好的forms是拥有一个用setTimeout调用自身的函数，并且每次都传递递增的ind参数。

UNTESTED。