Java脚本；非常简单的幻灯片

Question

我想使用 Javascript 创建一个简单的幻灯片。
我快完成了，但我遇到了麻烦。

我想出现在第三和第四。

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

当我点击下一个 #slide 时，不透明度会丢失，字体大小将重置为 0px。

var next = document.getElementById('next');
next.addEventListener('click', function() {
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";
}
}, 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";
}
}, false);

但我想要第三个或第四个内容。当我以同样的方式使用它时，这将直接出现。当你点击下一步时，你会直接出现第三。但它必须出现两次。

没有第三个内容的 FIDDLE FIDDLE

具有第三个内容的 FIDDE FIDDLE

我需要解决这个问题......

Answer 1

在您的 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);