<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;
}
事实上，我的脚本的第二部分有效：当我循环浏览它们时，图像会变得不透明，但它不能完全工作，因为我尝试删除不透明度和指针事件的脚本的第一部分似乎没有工作
为什么我的功能的第一部分没有清除不透明度？