How can I switch between different images using jQuery?

Question

How can I switch between different images using jQuery?

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

This script will change the images one by one when hovering over the div.

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

Upon hovering over the div, the images should change sequentially from "image_one" to "image_six". Any suggestions on how to implement this feature effectively?

javascript jquery css

Answer 1

Answer №1

http://example.com/code-sample

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

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

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

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

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

or something similar

UPDATE

http://example.com/updated-code

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;
       animateFunction()
    },function(){
        hover=false;
        clearTimeout(interval);
        $(".image_rollover img:visible").hide();
        $(".image_rollover img:first").show();
    });
});

function animateFunction() {

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

Answer 2

http://example.com/code-sample

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

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

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

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

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

or something similar

UPDATE

http://example.com/updated-code

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;
       animateFunction()
    },function(){
        hover=false;
        clearTimeout(interval);
        $(".image_rollover img:visible").hide();
        $(".image_rollover img:first").show();
    });
});

function animateFunction() {

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

Answer 3

Answer №2

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

To view the working example, visit http://jsfiddle.net/2q2ycbdz/2/

Answer 4

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

To view the working example, visit http://jsfiddle.net/2q2ycbdz/2/

Answer 5

Answer №3

It is recommended to use CSS to hide images and simplify the image selector within a div container (or group them with a class).

Take a look at 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="pic_one" src=image_one.png">
  <img id="pic_two" src="image_two.png">
  <img id="pic_three" src="image_three.png">
  <img id="pic_four" src="image_four.png">
  <img id="pic_five" src="image_five.png">
  <img id="pic_six" src="image_six.png">
</div>

See it in action on codepen.

Answer 6

It is recommended to use CSS to hide images and simplify the image selector within a div container (or group them with a class).

Take a look at 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="pic_one" src=image_one.png">
  <img id="pic_two" src="image_two.png">
  <img id="pic_three" src="image_three.png">
  <img id="pic_four" src="image_four.png">
  <img id="pic_five" src="image_five.png">
  <img id="pic_six" src="image_six.png">
</div>

See it in action on codepen.

Answer 7

Answer №4

JavaScript

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

Answer 8

JavaScript

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

Answer 9

Answer №5

Check out this jsFiddle demonstration

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

Answer 10

Check out this jsFiddle demonstration

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

Answer 11

Answer №6

If you're in search of some animated effects, give this a try.

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

Alternatively, if you prefer a chain-like animation:

Hover over the first image to reveal the second, then hover over the second for the third and so on... Does this meet your requirements?

        $(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 if this works for you!

Thanks a lot!

Answer 12

If you're in search of some animated effects, give this a try.

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

Alternatively, if you prefer a chain-like animation:

Hover over the first image to reveal the second, then hover over the second for the third and so on... Does this meet your requirements?

        $(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 if this works for you!

Thanks a lot!

How can I switch between different images using jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Update the HTML weather icon with data from JSON

Reorganize a list based on another list without generating a new list

"The controller's $scope isn't being updated within the DIV following a routing change

How can I access the id_lang variable in React JS from outside its scope?

jQuery slideToggle effect causes neighboring elements to move

Issue tracking the window scroll in Internet Explorer when using Jquery animation

Looking to customize scrolling behavior when navigating back in Next.js?

Stop HTML <dialog> from automatically closing using Vue

What is the issue with retrieving HTML from an iframe in Internet Explorer when the contents are

Adjusting the size of a Vue component on the fly

What is the best way to showcase the array data of two description values in a Vue v-for loop?

Tips for retrieving arguments within a method called from a template in vue.js?

Conceal the object, while revealing a void in its place

Encountering a TypeError while trying to run Pythonshell on my Mac device

Develop a monitor for an entity that has not been created

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

Guide on setting checkbox to be checked or unchecked depending on a value during table creation

The JavaScript object is not being properly posted to the $_POST variable on the PHP page when using vanilla AJAX

Styling elements with CSS