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's 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's 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;
}

实际上，我的脚本的第二部分有效：当我循环浏览图像时，图像会变得不透明，但它不能完全工作，因为我尝试删除不透明度和指针事件的脚本第一部分似乎不起作用

为什么函数的第一部分没有清除不透明度？