Question

我一直试图制作幻灯片＆＃39;有内容和下面的按钮，点击后，显示更多的内容。我只能做css淡化，这不是我真正想要的。我回避javascript和JQuery，因为我还没有学到这一点，我仍在努力掌握CSS和HTML。

由于我缺乏声誉，我无法上传图片，但您是否可以向我展示如何编写此代码的正确途径？非常感谢你

Answer 1

这是你想要的吗？ http://jsfiddle.net/8g64fabn/（在右下角试试）

<div id="content">

    <div>some stuff 1</div>
    <div>some stuff 2</div>
    <div>some stuff 3</div>
    <div>some stuff 4</div>
    <div>some stuff 5</div>

</div>

<button id="showMoreButton">Show more</button>

#content > div {
    /*Hide everything*/
    display: none;
}

#content > div:nth-child(1) {
    /*Show first element*/
    display: block;
}

//When the #showMoreButton is clicked
$("#showMoreButton").on("click", function () {

    //Get all the elements
    var elems = $("#content > div");

    //Get the visible element
    var visibleElem = elems.filter(":visible");

    //Get next hidden element
    var hiddenElem = visibleElem.next();

    //If there are is no hidden element after current one
    //Can be shortened to if (!hiddenElem.length) {
    if (!hiddenElem.length) {

        //Make hidden element the first hidden element;
        hiddenElem = elems.filter(":first");
    }

    //Hide current visible element
    visibleElem.hide();

    //Show next hidden element
    hiddenElem.show()

});

可以添加淡化效果和内容，如果你这样做，请告诉我。

如何编写包含内容但没有图片的幻灯片？

1 个答案: