Question

I’ve been trying to make this for 2 days, I apologize I’m new to Javascript/Jquery and I’m in the learning process.

I’m trying to create a javascript when the page is loaded will have an image fade in and fade out and after the first image fades in and out then a second, third, etc. however many I need.

I know this is a newby question but I’m clearly not sure what to look for at this point. And I have been doing research and learning along the way, I just would like to have it sooner than I may be able to accomplish.

Any help is appreciated.

This is what I came up with which to me looks completely invalid, but seems to work:

    <div class="splashbg1" style="display: none;"></div>
<div class="splashbg2" style="display: none;"></div>
<div class="splashbg3" style="display: none;"></div>
<div class="splashbg4" style="display: none;"></div>
<div class="splashbg5" style="display: none;"></div>


<script>
$(document).ready(function() {
    $('.splashbg1').fadeIn(1300, function() {
    $('.splashbg1').fadeOut(1300, function() {
    $('.splashbg2').fadeIn(1300, function() {
    $('.splashbg2').fadeOut(1300, function() {
    $('.splashbg3').fadeIn(1300, function() {
    $('.splashbg3').fadeOut(1300, function() {
    $('.splashbg4').fadeIn(1300, function() {
    $('.splashbg4').fadeOut(1300, function() {
    $('.splashbg5').fadeIn(1300, function() {
    });
    });
    });
    });
    });
    });
    });
    });
    });
});
</script>

Answer 1

example HTML:

<div id="images>
    <img src="">
    <img src="">
    ...
</div>

example Javascript:

function switchImage(){
    $('#images img:visible').fadeOut(function(){
        $(this).next().length ? $(this).next().fadeIn() : $('#images img').eq(0).fadeIn();
    });
};
$('#images img').hide().eq(0).show(); // show only the first image
setInterval(switchImage, 2000); // loop through images every 2000 milliseconds

example: http://jsfiddle.net/ampersand/nhp2v/