Javascript在悬停时切换到多个图像

我试图使多个图像保持切换悬停（视频缩略图效果），悬停的图像应保持切换通过5个图像

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

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

  $(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');

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

试试看

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

试试这个：

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++;
});

---

您可以使用

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");
});

试试这个

$('#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');
});

$（'#开关'）。悬停（函数（）{
setInterval（函数（）{
对于（变量i=0；i

创建图像数组和用于清除间隔的holder变量。然后使用

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:and 9GCRKVILZMA_RB9SW0ZSKJ48G3QPGFAUXDVXQEWMGET-mGCF8Ho-'；
var holder=null；
var指数=1；
$（'#开关'）。悬停（函数（）{
$（this.attr（'src'，imgArr[0]）；
var self=$（这是）；
保持架=设置间隔（开关图像，1000）；
}，函数（）{
净空间隔（保持器）
});
函数switchImages（）{
如果（索引==6）{
指数=0；
}
$（'#switch'）.attr（'src'，imgArr[index++]）；
}

---

这里有一种不同的方法，不使用

setInterval

。相反，让CSS通过CSS

步骤

方法使用

@关键帧

规则和

动画

规则来处理动画。您可以通过更改

速度

变量轻松控制动画的速度。imag也是如此es

宽度

和

高度

var图像=[
"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；
无功开关W=imgW*len；
var速度='1.8s'；
var css=$（'@keyframes播放{from{left:0px；}到{left:-'+switchW+'px；}}}'）。appendTo（'head'）；
var$listContainer=$（“#开关容器”）；
var$list=$（“#开关”）；
$listContainer.css({
“宽度”：imgW，
“高度”：imgH
})
$list.css（'width'，switchW）；
$。每个（图像、函数（idx、img）{
变量$item=$（“
”）
$list.append（$item）
})
$list.hover(
函数（）{
$（this.css（{“动画”：“播放”+speed+'步数（'+len+'）infinite'}）
},
函数（）{
$（this.css（{“animation”：“none”}）
}
)

正文{
保证金：0；
}
#交换机容器{
溢出：隐藏；
位置：相对位置；
}
#开关{
位置：绝对位置；
光标：指针；
列表样式类型：无；
保证金：0；
填充：0；
字号：0；
}
#开关>锂{
显示：内联块；
}

Hm…最终结果看起来（和工作）不太好…不确定意图…需要什么功能？如幻灯片放映（悬停时）或->每次悬停时-显示新的（数组中的下一个）图像？鼠标移出-返回默认值？

$('#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');
});