Javascript 如何在jquery中切换多个图像？

HTML

剧本

.image_rollover{
    border:1px solid #000000;
    width:130px;
    height:80px;
    overflow:hidden;
}

当我将鼠标悬停在div上时，第一个图像变为第二个图像，然后什么也没发生。当我将鼠标悬停在div上时，我想逐个地将图像从“image\u one”更改为“image\u six”

---

有人知道如何做到这一点吗？

请注意，如果通过css隐藏图像，并简化选择器以获取div中的所有图像（或使用类对这些图像进行分组），效果会更好

看看这个：

JS

$(document).ready(function(){
    $("#image_two, #image_three, #image_four, #image_five, #image_six").hide();

    $(".image_rollover").hover(function(){
      $(this).find("#image_one, #image_two, #image_three, #image_four, #image_five, #image_six").toggle();
    });
});

$(document).ready(function(){
  $(".image_rollover").hover(function(){
    $(this).find("img").toggle();
  });
});

CSS

$(document).ready(function(){
    $("#image_two, #image_three, #image_four, #image_five, #image_six").hide();

    $(".image_rollover").hover(function(){
      $(this).find("#image_one, #image_two, #image_three, #image_four, #image_five, #image_six").toggle();
    });
});

$(document).ready(function(){
  $(".image_rollover").hover(function(){
    $(this).find("img").toggle();
  });
});

HTML

.image_rollover{
  border:1px solid #000000;
  width:130px;
  height:80px;
  overflow: hidden;
}

.image_rollover img{
   display: none;
}

看看这个

您还可以看到

或者类似的东西

更新

---

如果你正在看一些动画。试试这个

var hover=false;
var interval;

$(document).ready(function () {
    $("#image_two, #image_three, #image_four, #image_five, #image_six").hide();
    $(".image_rollover").hover(function () {
       hover=true;
       animation()
    },function(){
        hover=false;
        clearTimeout(interval);
        $(".image_rollover img:visible").hide();
        $(".image_rollover img:first").show();
    });
});

function animation() {

    if(hover==false) return;

    var $curr=$(".image_rollover img:visible");
    var $next=$curr.next();    

    if($next.size()==0) $next=$(".image_rollover img:first");

    $next.show();
    $curr.hide();

    interval=setTimeout(function(){ animation(); }, 1000);
}

或者，如果您想要链式动画，请尝试以下方法：

所以，如果您将鼠标悬停在第一个图像上，则会出现第二个图像，如果悬停在第二个图像上，则会出现第三个图像，依此类推。。这就是你要找的吗

      $(document).ready(function () {

            var $siblings = $("#image_one").siblings();
            $siblings.hide();

            $("#image_one").on("mouseenter", function () {
                var timer = 100;
                var showTime = 0;
                $siblings.each(function () {
                    showTime += timer;
                    $(this).fadeIn(showTime).show()
                })
            });
        });

让我们知道

谢谢

JS

        $(document).ready(function () {

            var $siblings = $("#image_one").siblings();
            $siblings.hide();
            var timer = 500;
            var showTime = 0;
            function init_chain(ev){
                showTime += timer;
                var $next_element = $(ev.target).next()
                $next_element.fadeIn(showTime).show();
                $next_element.bind("mouseenter",init_chain);
            };

            $("#image_one").on("mouseenter", function (event) {
                init_chain(event);
            });
        });

jQuery(document).ready(function(){
    var current_image = 1;
    jQuery('.image_rollover').hover(function(){
        jQuery('.image_rollover img').hide();
        jQuery('.image_rollover img:nth-child('+current_image+')').show();
        current_image = current_image + 1;
        if (current_image == 7)
            current_image = 1;
    },function(){});
});

---

你能把你的密码发出去吗。我认为你首先不应该隐藏那些图像，因为toggle（）在显示和隐藏之间切换。此外，我真的很困惑你的目标是什么，你想让图像在显示和隐藏之间切换，或者你想让image1更改为image2，等等？即使你有打字错误

src=image\u one.png“

缺少

”

这是代码-我想将image1更改为image2，然后将image2更改为image3，依此类推on@AmarPawar你是说一个接一个？你的意思是你想要一个时间间隔，所以当你在鼠标悬停时，图像会自动改变——或者——你想要：在每一个新的鼠标上，图像都会改变？？我的意思是，当我把鼠标悬停在div上时，我想从第一个图像到第二个图像，然后从第二个图像到第三个图像，依此类推，直到最后一个图像。当我从div中移除鼠标时，图像再次变为第一个图像。您不需要

。each（）

jQuery已经创建了一个元素集合。只需使用

$（this.find（“img”）.toggle（）如果CMS中的一个输入8个图像怎么办？您的第二个代码工作正常。这就是我想要的。你也可以告诉我，在我从div中移除鼠标后，如何再次将图像更改为第一个。
        $(document).ready(function () {

            var $siblings = $("#image_one").siblings();
            $siblings.hide();
            var timer = 500;
            var showTime = 0;
            function init_chain(ev){
                showTime += timer;
                var $next_element = $(ev.target).next()
                $next_element.fadeIn(showTime).show();
                $next_element.bind("mouseenter",init_chain);
            };

            $("#image_one").on("mouseenter", function (event) {
                init_chain(event);
            });
        });

jQuery(document).ready(function(){
    var current_image = 1;
    jQuery('.image_rollover').hover(function(){
        jQuery('.image_rollover img').hide();
        jQuery('.image_rollover img:nth-child('+current_image+')').show();
        current_image = current_image + 1;
        if (current_image == 7)
            current_image = 1;
    },function(){});
});

$('.image_rollover').hover(function(){
    $("img:first", this).appendTo(this);
});