使用jquery將圖像src從多個圖像列表更改爲

Question

我想更改主圖像鼠標懸停上的圖像src我有一個腳本，但它只在兩個圖像時才起作用，但我需要從多個圖像更改圖像src。

我現有的代碼是這樣

<img width="220" height="220" alt="DE709 Folding Sunglasses" src="/images/7804/1__63824.1339534463.220.220.jpg" onmouseover="this.src='/images/x/319/1__53737.JPG'" onmouseout="this.src='/images/7804/1__63824.1339534463.220.220.jpg'"> 

而且上面的代碼工作爲我好，但我想是這樣的

<ul class="ProductList List"> 
     <li class="Odd" style="height: 220px;"> 
      <div data-product="1233" class="ProductImage QuickView" style="height: 244px; width: 220px;"> 
      <a href="#"> 
      <img alt="DE709 Folding Sunglasses" src="/images/7804/1__63824.1339534463.220.220.jpg"> 
      <img style="display: none;" width="220" height="220" src="/product_images/x/319/1__53737.JPG"> 
       <img style="display: none;" width="220" height="220" src="/product_images/w/307/1__63824.jpg"> 
       <img style="display: none;" width="220" height="220" src="/product_images/l/017/DE-DISPLAY-BOX__82034.jpg"> 
      </a> 
     <div> 
     </li> 
     <li> 
      <div data-product="1234" class="ProductImage QuickView" style="height: 244px; width: 220px;"> 
      <a href="#"> 
      <img alt="Designer Eyewear™ Folding Sunglasses DE706" src="/images/10064/DE706__95146.1346109648.220.220.jpg" /> 
      <img width="220" height="220" src="/product_images/u/773/2__48597.JPG" style="display: none;"> 
      <img width="220" height="220" src="product_images/w/403/1__41999.JPG" style="display: none;"> 
      <img width="220" height="220" src="product_images/r/222/DE-DISPLAY-BOX__17353.jpg" style="display: none;"></a> 
      </div> 
     </li> 


    </ul> 

當我懸停在image.jpg的第一次會告訴我image1.jpg當鼠標移出時顯示image.jpg，第二次顯示圖像image2.jpg等我懸停6次時，它再次顯示我image1.jpg。

編輯之前我只有一個div，所有解決方案都適用於我，但我需要對其進行一些更改。如果我有超過一個比我爲它做的。

我長時間在谷歌上搜索，但沒有得到正確的想法，所以請建議我如何實現我的目標。

任何好的鏈接或suggetion幫助我很好。

Answer 1

現在看到更新的代碼爲多格

<div> 
     <img class="parent " src="image.jpg"" data-pos = '0' /> 
     <div> 
     <img class="img" style="display:none" src="image1.jpg"" /> 
     <img class="img" style="display:none" src="image2.jpg"" /> 
     <img class="img" style="display:none" src="image3.jpg"" /> 
     <img class="img" style="display:none" src="image4.jpg"" /> 
     <img class="img" style="display:none" src="image5.jpg"" /> 
     </div> 
<div> 

<hr> 

<div> 
     <img class="parent " src="image.jpg"" data-pos = '0' /> 
     <div> 
     <img class="img" style="display:none" src="image1.jpg"" /> 
     <img class="img" style="display:none" src="image2.jpg"" /> 
     <img class="img" style="display:none" src="image3.jpg"" /> 
     <img class="img" style="display:none" src="image4.jpg"" /> 
     <img class="img" style="display:none" src="image5.jpg"" /> 
     </div> 

<div> 

和jQuery它是

$(document).ready(function(){ 
    var pos = 0; 
    $('.parent').bind('mouseover',function(){ 
     pos = $(this).data('pos'); 
     $(this).next('div').find('.img').eq(pos%5).show(); 
     $(this).hide(); 
     pos++; 
     $(this).data('pos',pos); 
    }); 
    $('.img').bind('mouseout',function(){ 
     $(this).hide(); 
     $('.parent').show(); 

    }); 
}); 

----------------- ------------下面是舊回答--------------------

使用以下HTML代碼

<div> 
<img class="parent " src="image.jpg" /> 
    <img class="img" style="display:none" src="image1.jpg" /> 
    <img class="img" style="display:none" src="image2.jpg" /> 
    <img class="img" style="display:none" src="image3.jpg" /> 
    <img class="img" style="display:none" src="image4.jpg" /> 
    <img class="img" style="display:none" src="image5.jpg" /> 

</div> 
<div> 

這jQuery的東西

$(document).ready(function(){ 
    var pos = 0; 

    //hide parent image and show one of the child image 
    $('.parent').bind('mouseover',function(){ 
     $('.img').eq(pos%5).show(); 
     $(this).hide(); 
     pos++; 
    }); 

    //hide child images and show parent image 
    $('.img').bind('mouseout',function(){ 
     $('.img').hide(); 
     $('.parent').show(); 
    }); 
}); 

這裏是fiddle

Answer 2

你應該做這樣的事情：

var images = $('img'); 
var first_image = $(images[ 0 ]); 
var original_src = images[ 0 ].src 
var count = 0; 

first_image.hover(function(){ 
    count++; 
    if(count >= images.length) { count = 1; } 
    first_image.attr('src', $(images[ count ]).attr('src')); 
}, function() { 
    first_image.attr('src', original_src); 
}); 

甚至更​​好的嘗試使用jQuery的越少，你可以

var images = $('img'); 
var first_image = images[ 0 ]; 
var original_src = images[ 0 ].src 
var count = 0; 

first_image.hover(function(){ 
    count++; 
    if(count >= images.length) { count = 1; } 
    first_image.src = images[ count ].src; 
}, function() { 
    first_image.src = original_src; 
}); 

Answer 3

由於這個問題被標記與jQuery，我做了一個快速的解決方案。這不是徹底testet，但它的工作原理:)

http://jsfiddle.net/D3RLH/

$("img").addClass("hidden"); 
$("img:first").removeClass("hidden").addClass("current"); 

$("img").on("mouseout",function(){ 
$(this).removeClass("current").addClass("hidden"); 
$(this).next("img").removeClass("hidden").addClass("current"); 

    if($(".current").length == 0) 
    { 
     $("img:first").removeClass("hidden").addClass("current"); 
    } 


}) 

它應該是在$（函數（）{}）

它通常做的是在顯示下一張圖片鼠標移開。如果沒有「下一張照片」，則顯示第一張照片。

您需要對腳本做些什麼，就是將它包裹在例如腳本中。一個div和更新選擇器，以確保它不涉及您的網頁上的所有圖片。

享受！

Answer 4

首先我會設置一些Id的。

<img id="img" src="image.jpg" onmouseover="SetHover();" onmouseout="SetOut();" /> 
<img id="1" style="display:none" src="image1.jpg" /> 
<img id="2" style="display:none" src="image2.jpg" /> 
<img id="3" style="display:none" src="image3.jpg" /> 
<img id="4" style="display:none" src="image4.jpg" /> 
<img id="5" style="display:none" src="image5.jpg" /> 

然後保留我想要在變量中顯示的圖像的索引，並將其用於所需內容。

var hoverIndex = 1; 

function SetHover() 
{ 
    $("#img").attr("src",$("#"+hoverIndex).attr("src")); 
    if(hoverIndex < 5) 
    hoverIndex++; 
    else 
    hoverIndex= 1; 
} 

function SetOut() 
{ 
    $("#img").attr("src","image.jpg"); 
} 

入住這jsbin http://jsbin.com/OBiNoSe/2/edit

Answer 5

var no = 0; 
var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'] 
$('img').on('hover', function() { 
    if (no>5){ 
     $(this).src(images[no]); 
     no++; 
    } 
    else { 
     no =0; 
     $(this).src(images[no]); 
    } 
}, function() { 
    $(this).src("image.jpg"); 
}); 

Answer 6

試試這個： 這將字面上顯示每個IMG和將每個IMG作爲自己的（使用未來的聽衆）

沒有類，否以不同來源顯示同一個img中的所有圖像。

var working=false,_=$('img'),i=0; 

$('body').on('mouseenter','img:visible',function(){ 
    if (working) return; 
    working=true; 
    go($(this)); 


}).on('mouseout','img:visible',function(){ 

    _.hide().eq(0).show(); 
     working=false; 
}); 

function go(t) 
{ i++; 
    _.eq((i)%_.length).show(); 
    t.hide(); 
    if (i==_.length) 
    { 
    _.eq(1).show(); 
    i=1; 
    } 
} 

http://jsbin.com/ujUYiveN/13/edit

附：這可以更好，沒有i計數器。只需使用：$（this）.index ...

Answer 7

好吧，我只是花了一段時間硬編碼給你，你最好選擇我作爲答案！ See demo here 它不僅適用於給定數量的圖像，而且適用於任何數量的圖像（如果圖像是從cms生成的）。

var original = $('.hover_img').src; 
var obj = $('.hover_img'); 
var arr = $.makeArray(obj); 
var len = arr.length; 
var indexNum = 0; 

$(".cover_img").mouseover(
    function() { 
     $(this).css("display", "none"); 
    $(arr[indexNum]).css("display", "block"); 
    }) ; 
$(".hover_img").mouseout(
     function() { 
    $(".cover_img").attr('src',original); 
     $(".cover_img").css("display", "block"); 
     $(arr[indexNum]).css("display", "none"); 
     indexNum++; 
     if (indexNum == len) indexNum = 0; 
    } 
);