javascript / css езда на велосипеде изображений и контента галерея - первая небольшая часть моего сценария не работает

<script>

        //here is an array of ids

        var backgroundId = new Array(); // create an array holding the ids to cycle through - the names here were actually not used, but I left the array as a counter and for later addition support
        var backgroundId = [
            "img_1",
            "img_2",
            "img_3",
            "img_4",
            "img_5",
            "img_6",
            "img_7",
        ];

        var ImageCnt = 0;

        //this next part is designed to set each of the 7 ids to have no opacity or pointer events to clear the way for the next image

        //this is the part that does not appear to be working properly

        for (i=1;i<=7;i++)//loop seven times
            {
                document.getElementById("img_" + i).style.opacity = "0"; //"un-render" the rest of the elements
                document.getElementById("img_" + i).style.pointer-events = "none";//"un-render" the rest of the elements
            }


        function nextImage(direction) // this should take into account the current value (starts at 3) and determines whether a higher or lower value should be returned based on the direction
        {
            //ImageCnt = (ImageCnt + (direction == "left" ? backgroundImages.length-1 : 1)) % backgroundImages.length;
            //document.getElementById("body-1").style.background = "url('"+backgroundImages[ImageCnt]+"')";//put the new background together for rendering by using the returned value from nextImage()

            //new setup - the above was based on a completely separate setup that failed to transition smoothly.
            //this function needs to decide which id needs to have an opacity of 1 and be clickable - all images are stacked

            ImageCnt = (ImageCnt + (direction == "left" ? backgroundId.length-1 : 1)) % backgroundId.length;// ImageCnt set to: ImageCnt plus (if direction is left)<-1>(else)<1> - in other words, for "left" subtract one from ImageCnt and for "right" add one to it, and then convert this to <%> to keep anything from escaping the maximum or minimum. 
            document.getElementById("img_" + ImageCnt).style.opacity = "1";//put the new background together for rendering by using the returned value from nextImage()
            document.getElementById("img_" + ImageCnt).style.pointer-events = "auto";




        }

</script>

<div class="body-1"><!-- begin body 1 :: this will hold the topmost image slider -->
    <div class="body-1-image" id="img_1"><!-- begin img_1 -->
    <div class="body-1-content"><!-- begin body 1 content :: this is overlaid over the body 1 background -->
        <div class="body-1-content-upper"><!-- begin body 1 content upper :: this includes title and subtitle -->
            <p>A&G Computer Services1</p>
            We make technology easy! Whether you're a home owner, small business, or corporation, we have a solution for you. 
        </div><!-- end body 1 content upper -->
        <div class="body-1-button-holder"><!-- begin body 1 holder -->
        <p class="button">Learn More</p>
        <p class="button">Contact Us</p>
        </div><!-- end body 1 button holder -->
    </div><!-- end body 1 content -->
    </div><!-- end img_1 -->

<!-- the above img_1 id div is repeated so that there are 7 divs each with separate backgrounds and text content to cycle through -->

</div><!-- end body 1 -->

И вот мой CSS для этой части:

.body-1
{
margin-top:-50px;
padding:0px;
width:100%;
height:470px;
background-color:#ebf6f7;
transition:background 2s;
overflow:hidden;  
}

.body-1-image
{
background-size:100% 470px;
position:absolute;
width:100%;
}

#img_1
{
background-image:url('images/bg1.png');
opacity:0;
pointer-events:none;
}

#img_2
{
background-image:url('images/bg2.png');
opacity:0;
pointer-events:none;
}

#img_3
{
background-image:url('images/bg3.png');
opacity:0;
pointer-events:none;
}

#img_4
{
background-image:url('images/bg4.png');
opacity:1;
pointer-events:none;
}

#img_5
{
background-image:url('images/bg5.png');
opacity:0;
pointer-events:none;
}

#img_6
{
background-image:url('images/bg6.png');
opacity:0;
pointer-events:none;
}

#img_7
{
background-image:url('images/bg7.png');
opacity:0;
    pointer-events:none;
}

Как бы то ни было, вторая часть моего скрипта работает: изображения увеличивают непрозрачность при прохождении через них, но она не работает полностью, потому что первая часть скрипта, где я пытаюсь удалить непрозрачность и события указателя, кажется, не работает

Почему непрозрачность не очищается первой частью моей функции?