1

Javascriptだけで簡単なスライドショーを作りたいです。
もうすぐ終わりますが、困っています。

3番目と4番目に出たいです。

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

しかし、私は 3 番目または 4 番目のコンテンツが必要です。これを同じように使用すると、これが直接表示されます。[次へ] をクリックすると、直接 [3 番目] が表示されます。ただし、前に 2 回表示する必要があります。

3 番目の内容のない FIDDLE FIDDLE

3 番目のコンテンツ FIDDE を持つ FIDDE

私はそれを修正する必要があります...

4

1 に答える 1

0

JavaScript では、次の条件を使用する必要がありました。

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

それ以外の：

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

スライド遷移ごとに。

また、最初のスライドは空の不透明度スタイル (1 ではなく "") で始まるため、条件に対して同じスライド 1 トランジションも追加しました。

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

また、先に進んで 4 番目のスライドを追加しました。

完成したコードは次のとおりです。

        <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);
于 2014-01-30T07:18:48.727 に答える