Jquery 将鼠标悬停在同一元素上时重复更改图像

我有一个有图像的div，下面是菜单。我需要的是，每当我将鼠标悬停在其中一个菜单项上时，图像就会发生变化。现在总共有5张图片，每次我把鼠标悬停在logo上，我都想让那张图片切换到下一张，直到它结束，然后用第一张图片重新开始这个循环

我第一次使用switch语句，可能是因为无法使它工作而出错。现在我可以从图1更改为图2，但随后它停止

我的守则如下：

HTML

，如果有人能看一下并指出我的错误，我将不胜感激：

这不是交换机的工作方式。开关类似于if-else链：

if ( currentimage == 0 )
    $('#img').attr('src',"http://placekitten.com/205/300");
else if ( currentimage == 1 )
    $('#img').attr('src',"http://placekitten.com/200/305");
else if ( currentimage == 2 )
    $('#img').attr('src',"http://placekitten.com/200/300");

但是，currentimage不是0、1或2，它是一个jQuery对象。当你打电话时：

var currentimage  = $('#img').attr('src',"http://placekitten.com/202/302");

您正在将图像的src属性设置为http://placekitten.com/202/302 然后返回图像对象本身。因此，switch语句不会输入任何case

因此，您需要找到另一种解决方案。一种方法是创建一个count变量，并在每个鼠标上方递增，然后在该变量上使用swtich：

var count = 0;
...
count = (count+1)%3;
switch (count) {

在犹他州。这不是最好的解决方案，但可能有助于您入门。

这不是交换机的工作方式。开关类似于if-else链：

if ( currentimage == 0 )
    $('#img').attr('src',"http://placekitten.com/205/300");
else if ( currentimage == 1 )
    $('#img').attr('src',"http://placekitten.com/200/305");
else if ( currentimage == 2 )
    $('#img').attr('src',"http://placekitten.com/200/300");

但是，currentimage不是0、1或2，它是一个jQuery对象。当你打电话时：

var currentimage  = $('#img').attr('src',"http://placekitten.com/202/302");

您正在将图像的src属性设置为http://placekitten.com/202/302 然后返回图像对象本身。因此，switch语句不会输入任何case

因此，您需要找到另一种解决方案。一种方法是创建一个count变量，并在每个鼠标上方递增，然后在该变量上使用swtich：

var count = 0;
...
count = (count+1)%3;
switch (count) {

---

在犹他州。这不是最好的解决方案，但可能有助于您入门。

尝试这种方法，而不是建立一个可能导致大量开关案例的列表 演示

---

尝试这种方法，而不是建立一个庞大的开关案例列表 演示

---

试着这样做：

var imgs = [
  'http://placekitten.com/205/300',
  'http://placekitten.com/200/305',
  'http://placekitten.com/200/300'
];

var $img = $('#img');
$('#logo').on('mouseover', function() {
  var current = imgs.indexOf($img.attr('src'));
  $img.attr('src', imgs[++current] || imgs[0]);
});

---

演示：

尝试以下内容：

var imgs = [
  'http://placekitten.com/205/300',
  'http://placekitten.com/200/305',
  'http://placekitten.com/200/300'
];

var $img = $('#img');
$('#logo').on('mouseover', function() {
  var current = imgs.indexOf($img.attr('src'));
  $img.attr('src', imgs[++current] || imgs[0]);
});

---

演示：

谢谢您的解释！谢谢你的解释！