Javascript；非常简单的幻灯片

我想用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>

但我想要第三或第四个内容。当我以同样的方式使用它时，它将直接出现。单击“下一步”时，u将直接显示在第三位。但它必须在之前出现两次

没有第三内容的胡闹

第三内容的FIDDE

---

我需要修复…

在javascript中，您需要使用以下条件：

if(document.getElementById('slide1').style.opacity==1)

if(document.getElementById('slide1').style.opacity=="")

而不是：

if(document.getElementById('slide1').style.opacity = "1")

对于每个幻灯片过渡

此外，第一张幻灯片以空不透明度样式开始，而不是1，因此我还为该条件添加了相同的幻灯片1转换：

if(document.getElementById('slide1').style.opacity==1)

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>

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

---

您的标记无效。应该只包含节点，并且必须在或内。所以您实际需要的是。你能再具体一点吗！请直接在问题中提出问题。小提琴也可能在未来作为一个点离开，也考虑添加到标题，这是目前过于通用，以帮助其他用户只是看到标题。谢谢我想在单击“下一步”时首先显示两次，然后显示第三次。但它将直接出现@codeSpywell和第四名之后什么意思？例如，如果要添加第五个？如果显示第四个并单击netxt，则不应首先显示它