Slideshow in JavaScript not working

Question

Okay I successfully created a basic slideshow but I wanted to add more effects and such to make it look more realistic. I am doing some coding but I don't know what is wrong. I end up crashing my MOZILLA everytime I run the script. Can anyone help me do this correctly? And not to mention I don't want any kind of jQuery modification to my code

JavaScript

    var img = new Array("a.jpg","b.jpg","c.jpg");
    var len = img.length - 1;
    var pos = 0;

    function slid(e){
        pos = pos + e;
        if(pos < 0)
        {
            pos = len;
        }
        if(pos > len)
        {
            pos = 0;
        }

        var a = 1;
        var i = 1;

        while(i<=50)
        {
            function op(a) {
                a -= 0.02;
                if(a < 0)
                {
                    a = 1;
                }
                document.getElementById("slide").style.opacity = a;
            }
            i++;
        }

        document.getElementById("slide").src = img[pos];
        return false;
    };

and yeah it's not fading(in this case changing opacity) help me on that too?

Answer 1

Take a look here:

while(i<=50)
    {
        function op(a) {
            a -= 0.02;
            if(a < 0)
            {
                a = 1;
            }
            document.getElementById("slide").style.opacity = a;
        }
    }

You are not incrementing your 'i' counter variable, resulting in an infinite loop, and hence browser crashing. Replace with this:

while(i<=50)
    {
        function op(a) {
            a -= 0.02;
            if(a < 0)
            {
                a = 1;
            }
            document.getElementById("slide").style.opacity = a;
        }
        i++; //increment the counter variable to prevent an infinite loop
    }