使用javascript的图像滑块，css在IE11上不起作用

Question

我制作了一个图片滑块，它适用于Chrome。 但是，我试过IE 11，它不会改变图像。

<div id="main_slides">
    <ul id="slides">
        <li class="slide showing"> <img src="images/main_01.jpg" id="slide_image" /></li>
        <li class="slide"> <img src="images/main_02.jpg" id="slide_image" /></li>
        <li class="slide"> <img src="images/main_03.jpg" id="slide_image" /></li>
    </ul>
</div>

#main_slides {
    overflow: hidden;
    width: 100%;
    background-color: #ffffff;
    background-color: #ccc;
    margin: 0px;
    padding: 0px;
}
#main_slides ul {
    position: relative;
    margin: 0px;
    padding: 0px;
}
#main_slides ul li {
    list-style: none;
}
#main_slides img {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0px;
    top: 0px;
}
#main_slides .slide {
    left: 0px;
    top: 0px;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
#main_slides .showing {
    opacity: 1;
    z-index: 2;
}

<script language="javascript">
    var slides = document.querySelectorAll("#main_slides .slide");

    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide, 4000);

    function nextSlide() {
        slides[currentSlide].className = 'slide';
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].className = 'slide showing';
    }
</script>

我在函数nextSlide的每一行尝试了警报，它显示了警报消息。 并且只是不会在Internet Explorer上更改图像。 我也尝试过改变DOCTYPE它也不起作用。