使用Javascript / CSS的内容幻灯片

Question

我正在尝试制作一个内容幻灯片，该幻灯片通过显示/隐藏div（slideOne，slideTwo，slideThree ...）来更改内容。 它无法与我拥有的javascript一起使用，并且我不太确定为什么。 我在下面创建了一个jsfiddle。 这些按钮没有激活功能/警报。

https://jsfiddle.net/1wggk6fw/

section / div的HTML代码。

<div class="section">
    <div class="slideWrapper">
        <div class="fdSlideAbout" id="aboutSlide">
      Use the buttons above to navigate through the weeks of your pregnancy!
                <br>
                Each week contains information about the little thing that is growing inside you!
                <br>
                Each section lists:
                <ul>
                    <li> the week, month, and trimester you're in.</li>
                    <li>any vital organs that are making themselves known.</li>
                    <li>what to compare the size of baby to for the week.</li>
                </ul>
            </div>

            <div class="fdSlide" id="slideOne">
                <div class="development">
                    <h2> Week One, Month One, Trimester One</h2>
                    <h5> Length: </h5>
                    about 0.014 to 0.04 inches <br>
                    <h5> Weight:</h5> less than 0.04 ounces<br>
                    <h5>Organs Developing: </h5>
                </div> <!--closing development-->
                <div class="sizeOf" id="sizeOne">
                    <p>image goes here</p>
                </div> <!-- closing sizeOne-->
            </div>  <!--closing slideOne -->
            <div class="fdSlide" id="slideTwo">
                <h2> Week Two, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div>  <!--closing slideTwo -->
            <div class="fdSlide" id="slideThree">
                <h2> Week Three, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div>  <!--closing slideThree -->
            <div class="fdSlide" id="slideFour">
                <h2> Week Four, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div>  <!--closing slideFour -->
            <div class="fdSlide" id="slideFive">
                <h2> Week One, Month One, Trimester One</h2>
                <h5> Length: </h5>
                about 0.014 to 0.04 inches <br>
                <h5> Weight:</h5> less than 0.04 ounces<br>
                <h5>Organs Developing: </h5>
            </div> <!--closing slideFive -->
        </div> <!-- closing slideWrapper -->
    <br>
    <div id="fdNavLinks">
        <div class="slideNav">
            <button class="previous" id="pPage">Last Week</button>
            <p class="activePage" id="aPage"></p>
            <button class="next" id="nPage"> Next Week</button>
        </div>
</div>
</div> <!--closing slide section-->

CSS：

    .slideWrapper {
    width: 97%;
    transform: translate3d(0,0,0);
    white-space: nowrap;
}

.slideWrapper .fdSlide {
    float: left;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    border: thin solid green;
    background: no-repeat;
    display: none;
    padding: 5px;
    text-align: center;
}

#slideOne {
    background-color: rgba(144,238,144, .5);
}
#slideTwo{
    background-color: rgba(144,238,144, .5);
}
#slideThree {
    background-color: rgba(144,238,144, .5);
}
#slideFour{
    background-color: rgba(144,238,144, .5);
}
#slideFive{
    background-color: rgba(113, 234, 245, 0.5);
}

.previous, .next{
    color: beige;
    background-color: darkgray;
}

.slideNav {
    text-align: center;
    display: inline;
}

JavaScript：

//Fetal Dev
    //Variables
var previous = document.getElementById('pPage');
var next = document.getElementById('nPage');
var slide = document.getElementsByClassName('fdSlide');
var prevPage = slide.previousElementSibling.id;
var nextPage = slide.nextElementSibling.id;
var firstSlide = slide.id('slideOne');
//Functions

function switchPrev() {
    //actPage = prevPage.id;
    alert(actPage);
    //actPage.style.display = 'inline';
}

function switchNext(){
    //actPage = nextPage.id;
    alert(actPage);
    //actPage.style.display = 'inline';
}


//Event Listeners
previous.addEventListener("click", switchPrev);
next.addEventListener("click", switchNext);

Answer 1

如果检查元素，您会注意到控制台中存在js错误。 我用错误注释掉了变量，并将警报更改为字符串（因为未定义该变量），并在“上周”按钮上触发了警报。 http://www.screencast.com/t/9XTYUww35HAX