Question

39

simple fading image swap

rated 0 times [ 43] [ 4] / answers: 1 / hits: 18791 / 12 Years ago, sun, february 10, 2013, 12:00:00

I'm having trouble finding a simple jquery image swap. Most the examples I've found are more complex than I need, and do things I don't want.

Objective: I have 5 images I want to fade in, slide in, or etc. I would love to fade/dissolve from one image to the next, but slide would be fine too. When the page 1st loads, I want the 1st image to show for 4 seconds...then fade to the next image, 4 seconds, then the next, etc. Infinite loop.

Currently my code is a simple image swap, not very elegant:

document.getElementById(imgMain).src = images/yurt/sleigh.png;

What's the best and simplest way to accomplish this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zackeryzainv

Add To Favorites

Follow

Total Points: 61

Total Questions: 102

Total Answers: 99

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

answered 12 Years ago zahrafrancisr · Accepted Answer

Working example on jsFiddle.

Here's the code:

HTML

<div class=fadein>

    <img src=http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg>

    <img src=http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg>

    <img src=http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg>

    <img src=http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg>

    <img src=http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg>

</div>

CSS

.fadein {

    position:relative;

    height:320px;

    width:320px;

}



.fadein img {

    position:absolute;

    left:0;

    top:0;

}

JavaScript

$('.fadein img:gt(0)').hide();



setInterval(function () {

    $('.fadein :first-child').fadeOut()

                             .next('img')

                             .fadeIn()

                             .end()

                             .appendTo('.fadein');

}, 4000); // 4 seconds