图像自动交换脚本大部分时间都不显示图像？

Question

我运行以下脚本以在我的两个徽标之间轮换。 我想要做的是页面将加载，然后图像将开始直接旋转到另一个图像，空白。

以下是代码：

var logo1 = "logo2.png";
var logo2 = "logo1.png";
var images = new Array (logo1, logo2);
var index = 1;

function rotateImage()
{
  $('.logoimage').fadeOut('slow', function()
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
}

$(document).ready(function()
{
  setInterval (rotateImage, 5000);
});

<img class="logoimage" src="logo1.png" onmouseover="this.src='logo2.png'" onmouseout="this.src='logo1.png'" alt="Dear Leader" style="display: inline;">

Answer 1

而不是使用onmouseover和onmouseout，你可以使用jQuery hover。

当您处于悬停功能时，您必须停止计时器淡入淡出效果，以避免闪烁效果。

我的建议是：

＆＃13;

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<img class="logoimage" src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png"  alt="Dear Leader" style="display: inline;">

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;