Javascript image fade in and out code not working in Drupal

I found a script online that works just fine when you are creating a simple html document but i would like to use it in Drupal. I am new to using javascript and i have no idea what to do to fix the problem.

What i am trying to do is create a banner that cycles images by fading them in and out that are attached to a page using a custom cck image field. I have looked around and have tried many different modules such as slideshow and views slideshow but i cant get any of them to work the way i want with out having to create a view for each page to put the images into. That in my opinion is ridiculous. i want my client to be able to attach the images to the page and not have to create a new view to get the banner to work.

The other reason is my programing skills are very limited and writing a php code that is built into the page.tpl.php that call in the images currently attached to the page displayed and i guess invoking (if thats the correct term) the views sideshow function is just not possible for me because i do not know how to go about doing that with out create a view for each page.

So anyways i have been reading and trying to get this to work but im lost.

This code seems to work for the first fade into the second image but when it tries to fade into the third it starts to go all crazy and flicker.

Here is the code:

function slideSwitch(switchSpeed) {
    var $active = $('#slideshow IMG.active');
    
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

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

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

$(function() {
    setInterval ( "slideSwitch(1000)", 5000 );    
});

Any help would be great thanks!