Question

我正在尝试让多个图像继续开启悬停（视频缩略图效果），onhover图像应该保持切换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');

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

Answer 1

试试这个：

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

Answer 2

创建图像数组，以及用于清除间隔的持有者变量。然后使用setInterval

＆＃13;

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

＆＃13;

<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-">

＆＃13;

Answer 3

您可以使用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");
});

Answer 4

试试这个

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

Answer 5

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

＆＃13;

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'})
  }
)

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

尝试

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

实际上，这会有点快。您可能想要添加像

这样的行

$.delay(500);

Javascript切换到多个图像onhover

6 个答案: