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

how to code a slideshow with content but no pictures?

本文关键字：有图片 幻灯片 何编写      更新时间：2023-09-26

我一直在尝试制作一个"幻灯片放映"，它有内容，点击下面的按钮可以显示更多内容。我只能做css渐变，这并不是我真正想要的。我回避javascript和JQuery，因为我还没有学会，而且还在努力掌握css和html。

我无法上传图片，因为我缺乏声誉，但你能告诉我如何编码吗？非常感谢

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

第二次尝试：http://jsfiddle.net/8g64fabn/2/

第三次更新：http://jsfiddle.net/8g64fabn/3/

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

可以添加渐变效果和其他东西，如果你添加的话，请告诉我。

相关文章：