複数の画像を切り替える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'); 

これはループによって達成できますか？おかげさまで

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

Answer 2

は実は、これは少し速くなり

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

を試してみてください。あなたはこれを試す

$.delay(500); 

Answer 3

のような行を追加したい場合があります：あなたはあなたが望むものを達成するためにsetIntervalを使用することができます

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 4

。

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

Answer 6

を使うsetIntervalを使用することなく、異なるアプローチです。代わりにCSS stepメソッドを使用して、@keyframesルールと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>