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丢失不透明度时，font-size将重置为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);

JavaScript的;非常简单的幻灯片

1 个答案: