如何編碼含有內容但沒有圖片的幻燈片？

Question

我一直試圖做一個'幻燈片'，有內容和一個按鈕，當點擊時，顯示更多的內容。我只能做css淡入淡出，這不是我真正想要的。我回避了JavaScript和JQuery，因爲我還沒有學會，並且仍然在努力掌握css和html。

我無法上傳圖片，因爲我缺乏聲譽，但是您是否可以向我展示如何對其進行編碼的正確途徑？非常感謝

Answer 1

這是你想要的嗎？ 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() 

}); 

淡入淡出效果之類的東西可以添加，讓我知道如果你做。