在您的 javascript 中,您需要使用以下条件:
if(document.getElementById('slide1').style.opacity==1)
代替:
if(document.getElementById('slide1').style.opacity = "1")
对于每个幻灯片过渡。
此外,第一张幻灯片以空的不透明度样式(“”而不是 1)开始,因此我还为条件添加了相同的 slide1 过渡:
if(document.getElementById('slide1').style.opacity=="")
我还继续为您添加了第四张幻灯片。
这是您完成的代码:
<article>
<div>
<ul class="slide" id="slide1">First</ul>
<ul class="slide" id="slide2">Twice</ul>
<ul class="slide" id="slide3">Third</ul>
<ul class="slide" id="slide4">Fourth</ul>
<li class="control" id="back" style="float: left;">Back</li><li class="control" id="next" style="float: right;">Next</li>
</div>
</article>
CSS:
* {
margin: 0px;
width: auto;
height: auto;
padding: 0px;
border: 0px groove;
list-style-type: none;
text-decoration: none;
font-family: arial,sans-serif;
zoom: 1;
}
article {
position: relative;
background-size: 100%;
top: 50px;
width: 100%;
height: calc(100% - 50px);
height: calc(100% - 50px)\9;
height: calc(100% - 50px)\0/;
color: black;
background: rgba(0,0,0,.65) !important;
-webkit-box-shadow: inset 0 7px 7px -7px black;
box-shadow: inset 0 7px 7px -7px black;
-o-box-shadow: inset 0 7px 7px -7px black;
-moz-box-shadow: inset 0 7px 7px -7px black;
}
div {
position: relative;
background: white;
top: 100px;
padding: 100px;
}
.slide{
margin-left: 100px;
}
#slide2, #slide3, #slide4 {
opacity: 0;
font-size: 0px;
}
.control {
display: inline;
position: static;
}
javascript:
var next = document.getElementById('next');
next.addEventListener('click', function() {
if (document.getElementById('slide1').style.opacity==""){
document.getElementById('slide1').style.opacity = "0";
document.getElementById('slide1').style.fontSize = "0px";
document.getElementById('slide2').style.opacity = "1"; document.getElementById('slide2').style.WebkitTransition= 'opacity 2s'; document.getElementById('slide2').style.fontSize = "16px";
}
else if (document.getElementById('slide1').style.opacity==1){
document.getElementById('slide1').style.opacity = "0";
document.getElementById('slide1').style.fontSize = "0px";
document.getElementById('slide2').style.opacity = "1"; document.getElementById('slide2').style.WebkitTransition= 'opacity 2s'; document.getElementById('slide2').style.fontSize = "16px";
}
else if (document.getElementById('slide2').style.opacity==1){
document.getElementById('slide2').style.opacity = "0";
document.getElementById('slide2').style.fontSize = "0px";
document.getElementById('slide3').style.opacity = "1"; document.getElementById('slide3').style.WebkitTransition= 'opacity 2s'; document.getElementById('slide3').style.fontSize = "16px";
}
else if (document.getElementById('slide3').style.opacity==1){
document.getElementById('slide3').style.opacity = "0";
document.getElementById('slide3').style.fontSize = "0px";
document.getElementById('slide4').style.opacity = "1"; document.getElementById('slide4').style.WebkitTransition= 'opacity 2s'; document.getElementById('slide4').style.fontSize = "16px";
}
}, false);
var back = document.getElementById('back');
back.addEventListener('click', function() {
if (document.getElementById('slide2').style.opacity==1){
document.getElementById('slide2').style.opacity = "0";
document.getElementById('slide2').style.fontSize = "0px";
document.getElementById('slide1').style.opacity = "1";
document.getElementById('slide1').style.WebkitTransition = 'opacity 2s';
document.getElementById('slide1').style.fontSize = "16px";
}
else if (document.getElementById('slide3').style.opacity==1){
document.getElementById('slide3').style.opacity = "0";
document.getElementById('slide3').style.fontSize = "0px";
document.getElementById('slide2').style.opacity = "1";
document.getElementById('slide2').style.WebkitTransition = 'opacity 2s';
document.getElementById('slide2').style.fontSize = "16px";
}
else if (document.getElementById('slide4').style.opacity==1){
document.getElementById('slide4').style.opacity = "0";
document.getElementById('slide4').style.fontSize = "0px";
document.getElementById('slide3').style.opacity = "1";
document.getElementById('slide3').style.WebkitTransition = 'opacity 2s';
document.getElementById('slide3').style.fontSize = "16px";
}
}, false);