如何在jQuery中切换多个图像？

Question

HTML

<div class="image_rollover">
     <img id="image_one" src=image_one.png">
     <img id="image_two" src="image_two.png">
     <img id="image_three" src="image_three.png">
     <img id="image_four" src="image_four.png">
     <img id="image_five" src="image_five.png">
     <img id="image_six" src="image_six.png">
</div>

CSS

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

Script

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

When I hover mouse over the div, first image changes to second image and then nothing happens. When I hover mouse over the div, I want to change the image one by one from "image_one" to "image_six".

Does any one know how to do this???

Answer 1

Note that will be better if you hide your images by css and if you simplify the selector to get all images inside the div (or group those images with a class).

Check out this:

JS

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

CSS

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

.image_rollover img{
   display: none;
}

HTML

<div class="image_rollover">
  <img id="image_one" src=image_one.png">
  <img id="image_two" src="image_two.png">
  <img id="image_three" src="image_three.png">
  <img id="image_four" src="image_four.png">
  <img id="image_five" src="image_five.png">
  <img id="image_six" src="image_six.png">
</div>

Check out this codepen .

Answer 2

$(document).ready(function(){
    $('.image_rollover img').hide();
    var index = 0;
    var $imageRollover = $('.image_rollover');
    var maxIndex = $imageRollover.find('img').length;
    $imageRollover.on('mouseenter', function(){
        $('.image_rollover img').hide();        
        console.log(index);
        $imageRollover.find('img').eq(index).show();
        index++;
        if (index >= maxIndex) {
            index = 0;
        }
    });
});

You can also see http://jsfiddle.net/2q2ycbdz/2/

Answer 3

http://jsfiddle.net/p7dsm1h7/

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

    $(".image_rollover").hover(function () {
       animation()
    });
});

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

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

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

or maybe something like this

UPDATE

http://jsfiddle.net/9v8ykfjs/2/

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

Answer 4

If you are looking with some animation. Try this.

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

Or If you wants a chain kind of animation try this:

So if you hover on first image, then second will appear, then if on second then third and so on.. is it what you are looking for??

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

Let us know.

Thanks!

Answer 5

JS

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

Answer 6

jsFiddle demo

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