Javascript切换到多个图像onhover

我想让多个图像不断切换悬停（视频缩略图效果），onhover图像应该保持切换5个图像。Javascript切换到多个图像onhover

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

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

目前该功能可以切换图像onHover选项到另一个，但我需要什么图片以通过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');

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

来源

2016-12-27 Ibrahim Maher

唔...最终的结果不会看（工作）的罚款...不知道是否打算...什么是所需的功能？像幻灯片放映（悬停），或 - 每个悬停 - >新（从阵列下一个）图像显示？ Mouseout - 回到默认值？ – sinisake

创建一个图像阵列，以及用于清除间隔的保持器变量。然后使用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-">

来源

2016-12-27 12:25:57 anu

downvote的原因？ – anu

-2

尝试

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

事实上，这将是一个有点快。您可能要添加像

$.delay(500);

来源

2016-12-27 12:08:13 elementzero23

线试试这个：

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

来源

2016-12-27 12:12:38

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

来源

2016-12-27 12:13:03 nashcheez

尝试此

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

来源

2016-12-27 12:16:29

这里是无需使用setInterval不同的方法。相反，让CSS通过使用@keyframes规则和animation规则以及CSS step方法来处理动画。您可以通过更改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>

来源

2016-12-27 13:09:17 DavidDomain

Javascript切换到多个图像onhover

回答

相关问题