JQuery 图片库非功能性淡入淡出效果

Question

这是一个简单的图片库脚本，用于淡入和淡出带有背景图像的 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，而不是让它们异步发生。

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

未经测试。