Slideshow Works with Firefox, Safari and Chrome but not IE

Slideshow Works with Firefox, Safari and Chrome but not IE

I have a slideshow that works on other browsers. However, it does not rotate between the images in IE. The code is below. Any suggestions or tips will be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Slideshow</title><style>#slideshow{height:360px; width:776px; float:left}#slides{height:324px; position:relative}.slide{
    height:324px;
    width:776px;
    overflow:hidden;
    position:absolute;
    background:#000;
    color:#fff;
    left: 0px;
    top: -0px;
}#slides-controls{width:60px; background-color:#fff; height:20px; margin-left:auto; margin-right:auto; padding:5px}#slides-controls a{margin:5px; width:8px; height:8px;  background:#F60; border:1px solid #fff; text-indent:-9000px; display:block; overflow:hidden; float:left}#slides-controls a:hover{background:#F30}#slides-controls a.highlight{background:#fff; border:1px solid #F30}</style>

<script type="text/javascript">5
slidePrefix            = "slide-";
slideControlPrefix     = "slide-control-";
slideHighlightClass    = "highlight";
slidesContainerID      = "slides";
slidesControlsID       = "slides-controls";
slideDelay             = 5000;
slideAnimationInterval = 20;
slideTransitionSteps   = 10;

function setUpSlideShow()
{
    // collect the slides and the controls
    slidesCollection = document.getElementById(slidesContainerID).children;
    slidesControllersCollection = document.getElementById(slidesControlsID).children;
 
    totalSlides = slidesCollection.length;
 
    if (totalSlides < 2) return;
 
    //go through all slides
    for (var i=0; i < slidesCollection.length; i++)
    {
        // give IDs to slides and controls
        slidesCollection[i].id = slidePrefix+(i+1);
        slidesControllersCollection[i].id = slideControlPrefix+(i+1);
 
        // attach onclick handlers to controls, highlight the first control
        slidesControllersCollection[i].onclick = function(){clickSlide(this);};
 
        //hide all slides except the first
        if (i > 0)
            slidesCollection[i].style.display = "none";
        else
            slidesControllersCollection[i].className = slideHighlightClass;
    }
 
    // initialize vars
    slideTransStep= 0;
    transTimeout  = 0;
    crtSlideIndex = 1;
 
    // show the next slide
    showSlide(2);
}

function showSlide(slideNo, immediate)
{
    // don't do any action while a transition is in progress
    if (slideTransStep != 0 || slideNo == crtSlideIndex)
        return;
 
    clearTimeout(transTimeout);
 
    // get references to the current slide and to the one to be shown next
    nextSlideIndex = slideNo;
    crtSlide = document.getElementById(slidePrefix + crtSlideIndex);
    nextSlide = document.getElementById(slidePrefix + nextSlideIndex);
    slideTransStep = 0;
 
    // start the transition now upon request or after a delay (default)
    if (immediate == true)
        transSlide();
    else
        transTimeout = setTimeout("transSlide()", slideDelay);
}

function clickSlide(control)
{
    showSlide(Number(control.id.substr(control.id.lastIndexOf("-")+1)),true);
}


 
function transSlide()
{
    // make sure the next slide is visible (albeit transparent)
    nextSlide.style.display = "block";
 
    // calculate opacity
    var opacity = slideTransStep / slideTransitionSteps;
 
    // fade out the current slide
    crtSlide.style.opacity = "" + (1 - opacity);
    crtSlide.style.filter = "alpha(opacity=" + (100 - opacity*100) + ")";
 
    // fade in the next slide
    nextSlide.style.opacity = "" + opacity;
    nextSlide.style.filter = "alpha(opacity=" + (opacity*100) + ")";
 
    // if not completed, do this step again after a short delay
    if (++slideTransStep <= slideTransitionSteps)
        transTimeout = setTimeout("transSlide()", slideAnimationInterval);
    else
    {
        // complete
        crtSlide.style.display = "none";
        transComplete();
    }
}

function transComplete()
{
    slideTransStep = 0;
    crtSlideIndex = nextSlideIndex;
 
    // for IE filters, removing filters reenables cleartype
    if (nextSlide.style.removeAttribute)
        nextSlide.style.removeAttribute("filter");
 
    // show next slide
    showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1);
 
    //unhighlight all controls
    for (var i=0; i < slidesControllersCollection.length; i++)
        slidesControllersCollection[i].className = "";
 
    // highlight the control for the next slide
    document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass;
}
</script>

</head><body onload="setUpSlideShow()"><div id="slideshow"><div id="slides">
<div class="slide"><a href=" https://marcomcentral.app.pti.com/printone/CustomPage.aspx?uigroup_id=16707&page_id=1818"><img src=" http://store.healthsouth.com/printable/hs/test/inspiration.jpg" width="776" height="324"/></a>Click here to start</div>
<div class="slide"><a href= " https://marcomcentral.app.pti.com/creativeprintgroup/newhealthsouth/catalog.aspx?uigroup_id=16707&folder_id=1107034"><img src=" http://store.healthsouth.com/printable/hs/test/Big-Polo-Sale.jpg" width="776" height="324"/></a>Click here to learn more</div>
<div class="slide"><a href= " https://marcomcentral.app.pti.com/printone/catalog.aspx?uigroup_id=16707&folder_id=1107034"><img src=" http://store.healthsouth.com/printable/hs/test/Clinical-Gift-Closeout-Sale.jpg" width="776" height="324"/></a>Click here to learn more</div>
<div class="slide"><a href= " https://store.healthsouth.com/printable/hs/test/Impressions 2_1 Summer 2014.pdf"><img src=" http://store.healthsouth.com/printable/hs/test/Impressions-Rotator.jpg" width="776" height="324"/></a>Click here to learn more</div>
<div class="slide"><a href= " https://marcomcentral.app.pti.com/printone/catalog.aspx?uigroup_id=16707&folder_id=1189867"><img src=" http://store.healthsouth.com/printable/hs/test/NRW Rotator.jpg" width="776" height="324"/></a>Click here to learn more</div>
<div class="slide"><a href=" https://marcomcentral.app.pti.com/printone/catalog.aspx?uigroup_id=16707&folder_id=1237175"><img src=" http://store.healthsouth.com/printable/hs/test/PT-Month-rotator.jpg" width="776" height="324"/></a>Click here to order </div>
</div><div id="slides-controls"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a></div></div></div></body></html>