fadeIn/Out question

JavaScript
1

I’m fairly new to javascript and I needed help with a simple slideshow on a project I’m working on. My javascript code is as follows:


first = 1;
last = 5;
current = 1;
           
function slideshow() {
    // Hide current picture
    object = document.getElementById('slide' + current);
    object.style.display = 'none';

    // Show next picture, if last, loop back to front
    if (current == last) { current = 1; }
    else { current++ }
    object = document.getElementById('slide' + current);
    object.style.display = 'block';
    setTimeout(slideshow, 10000);
}

And the HTML is


<div class="slideShow">
           <div id="slide1" class="slides">
               <img src="/images/slides/1.jpg" width="440" border="0" />
           </div>
           <div id="slide2" class="slides">
               <img src="/images/slides/2.jpg" width="440" border="0" />
           </div>
           <div id="slide3" class="slides">
               <img src="/images/slides/3.jpg" width="440" border="0" />
           </div>
           <div id="slide4" class="slides">
               <img src="/images/slides/4.jpg" width="440" border="0" />
           </div>
           <div id="slide5" class="slides">
               <img src="/images/slides/5.jpg" width="440" border="0" />
           </div>
        </div>

The technique involving the CSS display property works great and now I’d like to make the transition between the pictures a fade out/fade in. How would I do this and would I need to use a library such as jQuery for this effect?

2

Take a quick look at the slideshow on the home page of http://www.ancient-beadart.com

Creating fades in IE is easy: just use the MS fade filter.

For other browsers, the setTimeout method seems to work fine in the likes of Safari and Chrome, but gives unpredictable results in Firefox. So I chose the setInterval method instead.

What you basically need, then, is a browser detection routine that separates IE from non-IE, and then a couple of quite simple fade routines.

You are welcome to check my source code for the above site.

3

Why not search some existing libraries around google and use them instead of reinventing the wheel again for the same? I would really recommend you to search some and use them because there are lots of image slide show libraries available which are well tested too.
http://www.google.com/search?q=javascript+image+slider

4

Thanks alot guys. It’s great to have a community to back up your learning with real life solutions. Take care