javascript/css 循环图像和内容库 - 我的脚本的第一小部分不起作用

Question

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

实际上，我的脚本的第二部分有效:当我循环浏览图像时，图像变得不透明，但它并不完全有效，因为我尝试删除不透明度和指针事件的脚本的第一部分没有出现工作

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

Answer 1

啊哈!我在函数参数之外编写了清除脚本。已解决。