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

这是一个简单的图像库脚本，用于淡入和淡出带有背景图像的 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);
          }
  }
  

有什么想法出了什么问题吗？

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 参数。

未经测试。