JavaScript在鼠标悬停时切换多张图片

Question

我正在尝试实现多张图片的悬停切换效果（类似于视频缩略图效果），当鼠标悬停在图片上时，图片应该不断地在5张图片之间切换。

<img id="switch" src="img1.jpg">

$('#switch').hover(function() {
  $(this).attr('src', 'img2.jpg');
}, function() {
  $(this).attr('src', 'img1.jpg');
});

目前该函数可以在悬停时切换图像，但我需要的是图片通过5张图像不断切换。

  $(this).attr('src', 'img1.jpg');
  $(this).attr('src', 'img2.jpg');
  $(this).attr('src', 'img3.jpg');
  $(this).attr('src', 'img4.jpg');
  $(this).attr('src', 'img5.jpg');

这可以通过循环实现吗？谢谢。

- Ibrahim Maher

---

嗯...最终结果看起来（和工作）都不好...不确定意图是什么...想要的功能是什么？类似幻灯片（悬停时），还是->每次悬停-显示新的（从数组中的下一个）图像？鼠标移出-返回默认值？ - sinisake

Answer 1

创建一个图像数组，并创建一个保留间隔清除的变量。然后使用setInterval。

var imgArr = ['https://pbs.twimg.com/profile_images/604644048/sign051.gif','http://4.bp.blogspot.com/-DAY6ODJU1pw/T9cNFjn46fI/AAAAAAAAFSM/7WD5oM5UugA/s1600/one%2Bsmall%2Bapp.png','http://www.serif.com/_media/img/webplus/x8/new-features/small-feature-two.png','http://images3.moneysavingexpert.com/images/small-claims-court.png','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRkVIlZmA_Rb9SW0zsKJ48G3QPgfaeUxdvXqEwmgET-mGCF8Ho-'];
var holder=null;
var index = 1;
$('#switch').hover(function() {
  $(this).attr('src', imgArr[0]);
  var self = $(this);
  holder = setInterval(switchImages,1000);
}, function() {
  clearInterval(holder)
});

function switchImages(){
  if(index==6){
    index=0;  
  }
  $('#switch').attr('src', imgArr[index++]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img id="switch" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRkVIlZmA_Rb9SW0zsKJ48G3QPgfaeUxdvXqEwmgET-mGCF8Ho-">

- Anupam

Answer 2

try this :

var arr = ['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg'];
var nextIndex = 1;
$('#switch').hover(function() {
  $(this).attr('src', arr[nextIndex]);
  if(nextIndex == arr.length - 1)
    nextIndex = 0;
  else
    nextIndex++;
});

- Mustapha Larhrouch

Answer 3

这里有一种不使用setInterval的不同方法。相反，通过使用@keyframes规则和CSS step方法的animation规则，让CSS来处理动画。您可以通过更改speed变量轻松控制动画的速度。对于图像的width和height也是如此。

var images = [
  "http://placehold.it/100x100/2c3e50/fff?text=HELLO,",
  "http://placehold.it/100x100/2c3e50/fff?text=HOW",
  "http://placehold.it/100x100/2c3e50/fff?text=ARE",
  "http://placehold.it/100x100/2c3e50/fff?text=YOU",
  "http://placehold.it/100x100/2c3e50/fff?text=TODAY?",
];
var len = images.length;
var imgW = 100;
var imgH = 100;
var switchW = imgW * len;
var speed = '1.8s';
var css = $('<style>@keyframes play{from {left:0px;}to {left:-'+switchW+'px;}}</style>').appendTo('head');
var $listContainer = $('#switch-container');
var $list = $('#switch');

$listContainer.css({
  'width': imgW,
  'height': imgH
})
  
$list.css('width', switchW);
  
$.each(images, function(idx, img) {
  var $item = $('<li><img src="' + img + '" alt="image" /></li>' )
  $list.append($item)
})

$list.hover(
  function() {
    $(this).css({"animation": 'play '+speed+' steps('+len+') infinite'})
  },
  function() {
    $(this).css({"animation": 'none'})
  }
)

body {
  margin: 0;
}

#switch-container {
  overflow: hidden;
  position: relative;
}

#switch {
  position: absolute;
  cursor: pointer;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0;
}

#switch > li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="switch-container">
  <ul id="switch"></ul>
</div>

- DavidDomain

Answer 4

你可以使用 setInterval 来实现你想要的功能。

var count = 1;
$("#switch").hover(function() {
    var changeSrc = setInterval(function() {
        $(this).attr("src", "img" + count + ".jpg");
        count++;
        if (count == 6)
            count = 0;
    }, 500);
}, function() {
    count = 1;
    $(this).attr("src", "img" + count + ".jpg");
});

- nashcheez

Answer 5

试试这个

$('#switch').hover(function() {
  setInterval(function() {
    for(var i = 0; i < imgs.length; i++) {
      $(this).attr('src', 'img' +i+ '.jpg');
    }
  }, 3000);
}, function() {
  $(this).attr('src', 'img1.jpg');
});

- Dimple

Answer 6

尝试

for (var i = 1; i <= 5; i++) {
    $(this).attr('src', 'img' + i + '.jpg');
}

实际上，这可能有点快。你可能想要添加一行像这样的代码

$.delay(500);

- elementzero23