Hello! I'm very relatively new to JavaScript and web design/development. Trying to read books about it and all the different types of languages. Today, I started working on a personal project. On one of the pages, I've been trying to work on... the JS or CSS for it or something isn't right and the photos aren't displaying or anything.. just the empty picture symbol in the upper right hand corner. Ugh! Been searching online for solutions and came up with zilch, goose egg, nada. Could be doing something wrong as a beginner, but was wondering if anyone could help me figure it out? Any advice would be nice as well

Here's the script:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 3000 );
});


Then here's the CSS:


#slideshow {
position:relative;
height:350px;
}


#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}


#slideshow IMG.active {
z-index:10;
}


#slideshow IMG.last-active {
z-index:9;
}


And in the body to call it (if that's the terminology?) I have:

<div id="slideshow">
<img src="1.jpg" alt="" class="active" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
</div>



Thank you!