Jquery 具有相同阵列的多个图像旋转器

基本上，我制作了一个图像旋转器来循环一系列图像，就像这样

var home = new Array ('img/hex_portal.png', 'img/hex_guys.png', 'img/hex_aggames.png');
var index = 1;

function rotateImage()
{
  $('#hexOne').fadeOut('slow', function() 
  {
    $(this).attr('src', home[index]);

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

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

---

从我的主图像hexOne中循环出图像，效果非常好。现在我想添加另一个占位符，比如hexTwo，以循环遍历相同的图像数组，但顺序不同。也就是说，如果hexOne转到图1、图2、图3，那么hexOne的顺序和速度完全不同。有没有办法在不创建全新函数rotateImage2的情况下实现这一点，或者我应该使用新的索引和数组来实现这一点？

您是指每个图像淡入淡出的速度吗？为了能够更改这种速度，可以将速度定义为rotateImage的参数，并在定义淡出或淡出速度时使用它。然后，要更改顺序，您可以使用该函数洗牌初始图像数组：

function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

var home = new Array ('img/hex_portal.png', 'img/hex_guys.png', 'img/hex_aggames.png');
var home2 = shuffle(home);
var index = 1;

function rotateImage(i_speed,o_home,s_id)
{
  $(s_id).fadeOut(i_speed, function() 
  {
    $(this).attr('src', o_home[index]);

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

调用rotateImage时，将速度作为整数参数传递，将home或home2作为图像数组传递

我添加了一个可能更高级的参数，但这是一个很好的模式。主对象ImageSwitcher可以使用不同的参数进行初始化，这些参数将帮助您实现所需的功能。对象可以以任何方式扩展，但我认为它提供了足够的控制

---

看看我的评论，看看每个部分的意思。图像在不同时间变化的原因是，它们在淡入淡出后等待一段时间，然后调用旋转函数。淡出时间最短的图像当然会首先开始。

他还想更改另一个元素hexTwo，因此rotateImage函数应该包含字符串，以确定要更改图片的元素。好的，我可以看到您如何洗牌图像，这看起来很棒。然后我可以为html中的每个图像元素创建两个函数，一个是我想要显示的图像旋转器，然后在$document.readyTrue，bx89中调用它们。Packy，您可以调用use one函数并调用它两次，假设您将hexTwo作为第三个参数传递请参见编辑的代码，所以只需调用rotateImage 500，home，hexOne；和rotateImage 500，home，Hex2@我试过$document.readyfunction{rotateImage 3500，home2，hexTwo；}；但它不会旋转，只会在一张图像中淡出，然后停止工作。这将需要一点时间来消化你是如何做到的，但谢谢。