logo标签列表

使用jQuery更改多个图像列表中的图片源(src)

javascriptjqueryhtmlrollovermousehover
4

我希望在鼠标悬停在主要图片上时更改图像源，我有一个脚本，但它只能在两个图像时工作，但我需要从多个图像中更改图像源。

我的现有代码类似于

<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，所有的解决方案都适用于我，但我需要对其进行一些更改。如果我有多个，则该怎么办。

我在Google上搜索了很长时间，但没有得到合适的想法，请建议我如何实现我的目标。

任何好的链接或建议都可以帮助我。

7个回答
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;
});
1

由于问题标记有jQuery，我提供了一个快速解决方案。虽然没有进行彻底测试，但它可以工作 :)

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


})

这应该在您的 $(function(){}) 中。

它的基本功能是在mouseout时显示下一张图片。如果没有“下一张图片”，则显示第一张图片。

关于脚本，您需要做的是将其封装在例如一个div中，并更新选择器以确保它不涉及页面上的所有图片。

享受吧！

谢谢，但我需要在每次鼠标移出时恢复我的第一张图片，并且当我再次悬停鼠标时，它会从列表中显示下一张图片。感谢您的大力帮助。 - Jalpesh Patel
请检查更新版本：http://jsfiddle.net/D3RLH/1/ 请注意，由于我使用了position:absolute;，因此如果这很重要，图像将以相反的顺序出现 :) - Fizk
我编辑了我的脚本，请问你能再帮我一些吗？ - Jalpesh Patel
请查看Zainul Abedin的答案 - 它似乎起作用了 :) - Fizk
1
尝试这个： 这将逐个显示每个图像并将每个图像视为自己的(使用未来监听器)
没有类，没有将所有图像显示在具有不同源的相同图像中。
 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;
  }
}

enter image description here

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

附注：这可以更好，不需要使用i计数器，只需使用：$(this).index...

并不真正起作用，当鼠标移出时它没有恢复到原始图像。 - Godinall
只能工作一轮，之后所有的图片都会被设置为display:none :) - Godinall
这非常有用，但我需要进行一些更改，因此我编辑了我的问题。您能帮我吗？ - Jalpesh Patel
1
现在看到了多个 div 的更新代码。
<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。
我有超过两个div，我应该怎么处理它们？ - Jalpesh Patel
请查看我修改后的问题。 - Jalpesh Patel
请检查我的更新答案，这里是 fiddle。 - Zainul Abdin
0

首先，我会设置一些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

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

好的，我刚刚花了一些时间为您硬编码这个，您最好选择我作为答案！ 在此处查看演示 它不仅适用于给定数量的图像，而且如果图像是从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;
  }
);
你的回答帮了我很多，但我需要做一些修改，请查看我的编辑后的问题，你能帮我吗？ - Jalpesh Patel
@Jalpesh，你应该选择我的答案，因为它完美地解决了你最初的问题...现在你已经有了一个答案，所以没关系。 - Godinall
我已经给你的回答点了一个赞，但它并不完全符合我的要求。因此，我会接受那些对我来说更完美的答案，也适用于像我一样有同样问题的人。所以请不要介意。 - Jalpesh Patel
刚刚注意到你选择的答案有一个错误，请尝试将鼠标移入/移出三次，整个图像 div 就会消失，你将无法显示任何内容。 - Godinall
是的，这是因为在js fiddle中有%5，如果您设置为%3，则完全符合我的要求。请再检查一下。 - Jalpesh Patel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接