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，所有解决方案都适合我，但我需要对它进行一些更改。如果我有超过我为它做的事情。

我长时间在谷歌上搜索但没有得到正确的想法所以请建议我如何实现我的目标。

任何良好的联系或建议都对我有帮助。

Answer 1

你应该这样做：

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 2

由于问题用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和更新选择器，以确保它不涉及页面上的所有图片。

享受！

Answer 3

试试这个：这将字面显示每个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;
  }
}

enter image description here

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

P.S。没有i计数器，这可能会更好。只是用：$（this）.index ...

Answer 4

现在看到多个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

Answer 5

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

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

使用jquery从多个图像列表更改图像src

7 个答案: