Using jquery to jump between images

Question

Using jquery to jump between images

I have two images of the same size and text, but different colors (they are used as logos). I would like to slowly automatically switch between two images using jQuery. First, I was going to make a GIF image from two images, but then I thought it was possible to use jQuery.

Is this possible with jQuery?

I want the transition to occur without any input from the user, and this can happen every X seconds.

Please let me know how to do this.

+4

jquery html image transition

Anthony Nov 12 '11 at 13:58

source share

4 answers

Yes, you can put a new image on top of the current one using absolute positioning, and then use fadeTo to gradually change the new image. You can use a simple setInterval to make this happen periodically.

EDIT: fadeTo allows you to go to a certain level of transparency. It’s easier to just use fadeIn, which will go from 100% to 0% transparency.

+1

dnuttle Nov 12 '11 at 2:04

source share

I found this solution simple and suitable for my needs.

Its essence is as follows:

Put all the images you want to move in one div.
Set the class of one of them as "active"
In css, hide all images that don't have a class set to "active"
Custom jquery selector to grab the current “active” element, unlock it, and set the next (or first) image element in the div to the “active class”. Use jquery fadeOut and fadeIn to handle transitions.
Use setInterval to handle loop time.

Via: http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html

<html> <head> <script src="jquery.js"> </script> <script> function swapImages(){ var $active = $('#myGallery .active'); var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first'); $active.fadeOut(function(){ $active.removeClass('active'); $next.fadeIn().addClass('active'); }); } $(document).ready(function(){ // Run our swapImages() function every 5secs setInterval('swapImages()', 5000); } </script> <style> #myGallery{ position:relative; width:400px; /* Set your image width */ height:300px; /* Set your image height */ } #myGallery img{ display:none; position:absolute; top:0; left:0; } #myGallery img.active{ display:block; } </style> </head> <body> <div id="myGallery"> <img src="image1.jpg" class="active" /> <img src="image2.jpg" /> <img src="image3.jpg" /> </div> </body> </html>

0

David marx 30 sept '14 at 22:23

source share

I used this code. for my website.

HTML

 <div id="kop"> <img class="head" src="images/header_logo.png"> <img class="head" src="images/header_naam.png"> <img class="head" src="images/header_slogan.png"> </div>

CSS

  #kop { position: absolute; width: 620px; height: 110px; } .head { position: absolute; top: 15px; left: 215px; width: 620px; height: 110px; }

JQuery

  $(document).ready(function(e) { var delay = 3000, fadeTime = 2000; $('.head:gt(0)').hide(); setInterval(function(){ $(".head:first-child").fadeOut(fadeTime).next(".head").fadeIn(fadeTime).end().appendTo("#kop") }, delay+fadeTime); });